निम्न 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/

इस उदाहरण में, दोनों एक उल में एक li तत्व और एक गैर वंशज div class "foo" है। उदाहरण में, मैं .foo चयनकर्ता का उपयोग करता हूं और टेम्पलेट स्ट्रिंग में संदर्भ सेट करता हूं। दूसरा, मैं स्ट्रिंग पर .find() का उपयोग करता हूं। अंत में, मैं स्ट्रिंग पर .filter() का उपयोग करता हूं।

क्या कोई यह समझा सकता है कि चयनकर्ता तंत्र क्यों काम कर रहे हैं, और शुरुआत में वर्णित लक्ष्य को कैसे प्राप्त किया जाए?

Answer 1

ऐसा इसलिए है क्योंकि यह एक रूट नोड नहीं है, लेकिन दो (ul और div)। एक <div> में

लपेटें सब कुछ है और यह काम करेगा: - <ul> तत्व और <div class="foo"> तत्व

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

Answer 2

$(tmpl) कॉलिंग दो तत्वों के साथ एक समूह बनाता है। .find() ऐसे तत्वों को ढूंढता है जो चयनकर्ता से मेल खाने वाले सेट में से किसी भी तत्व के वंशज हैं। .filter() चयनकर्ता से मेल खाने वाले सेट में कोई भी तत्व लौटाता है।

पहले दो लाइनों:

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

बराबर हैं, वे एक ही बात लिखने के लिए सिर्फ दो अलग अलग तरीकों से कर रहे हैं।