jQuery.find() ignoruje węzeł główny

Question

Mój obiekt jQuery wygląda następująco:

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

myJq.find(".a") zwraca pusty obiekt jQuery, najwyraźniej dlatego tylko find() przeszukuje dzieci węzłów znajdujących się w obiekcie jQuery, nie same węzły.

Jak mogę pobrać jeden z elementów div w myJq za pomocą selektora?

Answer 1

Zamiast tego należy użyć .filter().

Spowoduje to filtrowanie elementów znajdujących się na najwyższym poziomie obiektu jQuery.

myJq.filter(".a") 

Answer 2

Można użyć .filter()

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

lub (lepiej, szybciej) używać .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() jest dla mnie około 8 razy szybszy.

Answer 3

Oto .find2() że znajdziemy zarówno elementy korzeniowych i dzieci:

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

z tym można zrobić:

var html = '<div class="one"><div class="one"></div></div>'; 
var el = html.find2(".one"); // will match both divs 

Oto więcej na ten temat: http://danielnouri.org/notes/2011/03/14/a-jquery-find-that-also-finds-the-root-element/