jQuery.find() bỏ qua rễ nút

Question

đối tượng jQuery của tôi trông như thế này:

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

myJq.find(".a") trả về một đối tượng jQuery trống, rõ ràng là vì find() tìm kiếm chỉ trẻ em các nút chứa trong một đối tượng jQuery, không phải là các nút.

Làm cách nào để lấy một trong các div trong myJq bằng bộ chọn?

Answer 1

Thay vào đó, bạn cần sử dụng .filter().

Điều này sẽ lọc qua các mục ở cấp cao nhất của đối tượng jQuery.

myJq.filter(".a") 

Answer 2

Bạn có thể sử dụng .filter()

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

hoặc (tốt hơn, nhanh hơn) sử dụng .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() nhanh hơn khoảng 8x.

Answer 3

Dưới đây là một .find2() rằng sẽ tìm thấy tất cả các yếu tố gốc và trẻ em:

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

Với điều này, bạn có thể làm:

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

Dưới đây là thêm về nó: http://danielnouri.org/notes/2011/03/14/a-jquery-find-that-also-finds-the-root-element/