JQuery find yourself

Question

This may seem strange, but I'm working on a plugin that needs to find elements in the div or the div itself.

The script finds the element based on user selection, but the content, including the markup, is a variable. Thus, the script will search for the element as follows:

$('.block').find(selector); // selector set by user 

but there is no easy way to select the ".block" selector. Choosing a parent before using find is not a solution, as there are several .block elements.

I know that the selector extension expr[":"] will not work, as it only searches for children. But, I figured out the way to “ duck punch ” this method by making the selector “: self”:

 (function($){ var orig = $.fn.find; $.fn.find = function(sel){ return (sel === ':self') ? this : orig.call(this,sel); } })(jQuery) 

But this is a bit like the top. And this will slow down jQuery's processing with a tiny bit with every search function. Is there any other way to do this?

---

Thanks for answers! But I ended up with this:

 var b = $('.block'), el = (b.is(selector)) ? b : b.find(selector); 

Answer 1

the approach with find ('*') will be much more intense, and I would recommend:

 $('.block').find(selector).add($('.block').filter(selector)); 

Answer 2

I also ran into this problem. I solved it like this (basically Romans Malinovskis solution as a jquery plugin):

 $.fn.findAll = function(selector) { return this.find(selector).add(this.filter(selector)); }; 

Answer 3

Edition:

You can use the entire '*' selector in conjunction with andSelf to get a selection containing an element with all its children and children. Then you can filter () this selection on the selected selector.

 <style type="text/css">li {background-color: white;}</style> <script type="text/javascript"> $(function () { $('div').find('*').andSelf().filter(selector).css('background-color','blue'); } </script> <div> This is a test <ul> <li class="test">This is a test</li> <li>This is a test</li> <li class="test">This is a test</li> <li>This is a test</li> <li class="test">This is a test</li> <li>This is a test</li> </ul> </div> 

You need to change the backgrounds of all .test objects, as well as the original div that was selected, if necessary. I am not sure about the performance of my answer though.

Example: http://jsfiddle.net/7A9JJ/2/

EDIT Or you can just do $ ('div, div *'). Filter (selector);

Answer 4

Starting from 1.8 you can do

 $('.block').find(selector).addBack(selector); 

Answer 5

I'm not sure why this should be so complicated. All of this can be done with a simple multiple selector :

 $(selector + '.block, .block ' + selector); 

No find , filter , not add , but more productive in many (most?) Modern browsers (tested with jQuery 1.9).

Warnings

• You might want to trim the user-provided selector in advance, as the following spaces will occur here:
• This solution is somewhat specific to the OP question and will not work if the selector of the target div starts with the element name, i.e. selector + 'th, th ' + selector will not give a valid selector; in such cases, I would recommend using one of the more general solutions;
• You can still follow a multi-selector approach using the EXTREMELY HACKY method, rather than in all recommendations, which includes using a pseudo-selector :not() : see a working demo and terrible, terrible performance .

Answer 6

I create a jquery findAll method as shown below

 $.fn.findAll = function ( selector ) { if ( this.length === 0 ) { return this; } else if ( this.length === 1 ) { return this.filter( selector ).add( this.find( selector ) ); } else { var rtn = this.filter( selector ); this.each( function () { rtn.add( $( this ).find( selector ) ); } ); return rtn; } } 

you can use it as below

 $resultSet.findAll(selector)