Почему следующий селектор jQuery не возвращает оба элемента?

Question

Я столкнулся с ситуацией, когда я создаю объект jQuery из строки html и мне нужно выбрать все элементы в нем с определенным классом.

То, что я нахожу странным, это то, что он возвращает один или другой, в зависимости от того, какой тип механизма выбора я использую. Тестовый пример показан здесь:

var tmpl = '<ul><li class="foo">TEST</li></ul><div class="foo">BAR</div>';

console.log( $('.foo', tmpl) ); //[<li class="foo">TEST</li>]
console.log( $(tmpl).find('.foo') ); //[<li class="foo">TEST</li>]
console.log( $(tmpl).filter('.foo') ); //[<div class="foo">BAR</div>]

http://jsfiddle.net/Rfq9F/

В этом примере оба элемента li в элементе ul и элементе, не являющемся потомком, имеют класс "foo". В этом примере я использую селектор .foo и устанавливаю контекст для строки шаблона. Во-вторых, я использую .find () в строке. Наконец, я использую .filter () в строке.

Может ли кто-нибудь объяснить, почему механизмы выбора действуют так, как они работают, а также как достичь цели, о которой я упоминал в начале?

Answer 1

Это потому, что это не один корневой узел, а два (ul и div).

Оберните все в <div>, и оно будет работать:

http://jsfiddle.net/Rfq9F/3/

Answer 2

При вызове $(tmpl) создается набор из двух элементов - элемента <ul> и элемента <div class="foo">. .find() ищет элементы, которые являются потомками любого из элементов в наборе, которые соответствуют селектору. .filter() возвращает все элементы в наборе, которые соответствуют селектору.

Первые две строки:

console.log( $('.foo', tmpl) );
console.log( $(tmpl).find('.foo') );

эквивалентны, это просто два разных способа написать одно и то же.