jQuery.find() ignora nodo raíz

Question

Mi objeto jQuery se ve así:

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

myJq.find(".a") devuelve un objeto jQuery vacío, al parecer porque find() busca solamente en los niños de los nodos contenidos en un objeto jQuery, no los nodos mismos.

¿Cómo puedo tomar uno de los divs en myJq usando un selector?

Answer 1

En su lugar, necesita usar .filter().

Esto filtrará a través de elementos en el nivel superior del objeto jQuery.

myJq.filter(".a") 

Answer 2

Puede utilizar .filter()

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

o (mejor, más rápido) utilizan .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() es aproximadamente 8 veces más rápido para mí.

Answer 3

Aquí hay una .find2() que va a encontrar ambos elementos raíz y niños:

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

Con esto, se puede hacer:

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

Aquí hay más sobre esto: http://danielnouri.org/notes/2011/03/14/a-jquery-find-that-also-finds-the-root-element/