다음 jQuery 선택기가 두 요소를 모두 반환하지 않는 이유는 무엇입니까?

Question

나는 html 문자열에서 jQuery 객체를 생성하고 특정 클래스와 함께 모든 요소를 ​​선택해야하는 상황에 처했습니다.

이상한 점은 내가 사용하고있는 메커니즘을 선택하는 방식에 따라 그 중 하나가 반환된다는 것입니다. 테스트 케이스는 여기에 표시됩니다 :이 예에서

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/

하는 UL의 리튬 요소와 비 자손 DIV 모두 클래스 "foo는"이있다. 이 예제에서는 .foo selector를 사용하고 템플릿 문자열에 컨텍스트를 설정합니다. 둘째, 문자열에 .find()를 사용합니다. 마지막으로 .filter()를 문자열에 사용합니다.

내가 선택기 메커니즘이 작동하는 이유와 내가 처음에 언급 한 목표를 달성하는 방법을 설명 할 수 있습니까?

Answer 1

단일 루트 노드가 아니기 때문에 두 개 (ul 및 div)입니다.

랩 a를 <div>의 모든 그것은 작동합니다 - <ul> 요소와 <div class="foo"> 요소

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

Answer 2

는 $(tmpl) 호출은 두 요소 세트를 만듭니다. .find()은 셀렉터와 일치하는 요소 중 하나의 하위 요소 인 요소를 찾습니다. .filter()은 셀렉터와 일치하는 요소를 반환합니다.

처음 두 줄은 :

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

은 같은 일을 작성하는 두 가지 방법으로있어, 동일합니다.