jQuery.find () игнорирует корневой узел

Question

Мой объект jQuery выглядит следующим образом:

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

myJq.find(".a") возвращает пустой объект jQuery, очевидно, потому что find() ищет только потомков узлов, содержащихся в jQueryобъект, а не сами узлы.

Как получить один из элементов div в myJq с помощью селектора?

Answer 1

Вместо этого вам нужно использовать .filter().

Это отфильтрует элементы на верхнем уровне объекта jQuery.

myJq.filter(".a")

Answer 2

Вот .find2 () , который найдет как корневые элементы, так и дочерние:

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

С этим вы можете сделать:

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

Вот еще об этом: http://danielnouri.org/notes/2011/03/14/a-jquery-find-that-also-finds-the-root-element/

Answer 3

Вы можете использовать .filter()

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

или (лучше, быстрее) использовать .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() примерно в 8 раз быстрее для меня.