jQuery.find() ignores root node

Question

My jQuery object looks like this:

var myJq = jQuery("<div class='a'></div><div class='b'></div>")

myJq.find(".a") returns an empty jQuery object, apparently because find() searches only the children of the nodes contained in a jQuery object, not the nodes themselves.

How can I grab one of the divs in myJq using a selector?

Answer 1

You need to use .filter() instead.

This will filter through items at the top level of the jQuery object.

myJq.filter(".a")

Answer 2

You can either use .filter()

var div = myJq.filter('.a');

or (better, faster) use .first()

var div = myJq.first('.a');

Benchmark

var myJq = jQuery("<div class='a'></div><div class='b'></div>")
var loop = 20000; 

console.time('filter');  
while(loop--){
    var blah = myJq.filter(".a");
}
console.timeEnd('filter');

loop = 20000;

console.time('first');  
while(loop--){
    var blah = myJq.first(".a");
}
console.timeEnd('first');

.first() is about 8x faster for me.