2012-05-03 3 views
5

की स्ट्रिंग से निर्मित एक jQuery ऑब्जेक्ट में एक तत्व खोजें I HTML की स्ट्रिंग से एक jQuery ऑब्जेक्ट बनाने और सीधे अंदर खोजने के लिए सक्षम होना चाहते हैं।एचटीएमएल

उदाहरण:

htmlString = '<h3>Foo</h3><div class="groups"></div>' 
$html  = $(htmlString) 
$groups = $html.find('.groups') // Returns []. WTF? 

मुझे लगता है कि वास्तव में finddiv तत्व पाता है उम्मीद करेंगे।

आप मेरे सवाल के संदर्भ के बारे में अधिक जानना चाहते हैं, मैं एक रीढ़ एप्लिकेशन को विकसित करने और कुछ दृश्य मुझे लगता है कि तरह बातें है रेंडर करने के लिए:

render: -> 
    $html = $(@template(vehicle: @vehicle)) 
    $groups = $() 

    _(@groups).each (group)=> 
    subview = new App.Views.AttributesGroup(group: group, vehicle: @vehicle) 
    $groups = $groups.add(subview.render().el) 

    $(@el).html($html) 
    $(@el).find('.groups').replaceWith($groups) 
    @ 

मैं करने के लिए एक और अधिक सुरुचिपूर्ण तरीके के लिए देख रहा हूँ एक ही परिणाम प्राप्त करें।

धन्यवाद!


धन्यवाद मैट, यह बहुत स्पष्ट है। मैं वंश और भाई बहनों के बारे में इस subtlety के बारे में सोचा नहीं बेवकूफ महसूस करता हूँ।

render: -> 
    $html = $(@template(vehicle: @vehicle)) 
    $groups = $html.filter('.groups') 

    _(@groups).each (group)=> 
    subview = new App.Views.AttributesGroup(group: group, vehicle: @vehicle) 
    $groups.append(subview.render().el) 

    $(@el).html($html) 
    @ 

अब वहाँ केवल एक डोम प्रविष्टि है और कोड मेरे लिए स्पष्ट दिखता है:

तो मैं अपने कोड पुनर्संशोधित।

उत्तर

7

इसका कारण यह है find() jQuery वस्तु में तत्वों के वंशज खोज करता है, लेकिन .groups तत्व jQuery वस्तु में एक तत्व तो मिलान नहीं किया जा जाएगा है।

इसके बजाय, आपको मौजूदा तत्वों को खोजने के लिए filter() का उपयोग करने की आवश्यकता है।

htmlString = '<h3>Foo</h3><div class="groups"></div>' 
$html  = $(htmlString) 
$groups = $html.filter('.groups'); 

हालांकि आप तो था <h3><span class="bar">Foo</span></h3><div class="groups"></div> की htmlString, आप .bar नहीं मिल रहा है अगर; यह find() कॉल होगा।

तो आपको दोनों की जांच करनी होगी;

htmlString = '<h3>Foo</h3><div class="groups"></div>' 
$html  = $(htmlString) 
$groups = $html.find('.groups').add($html.filter('.groups')); 
+0

धन्यवाद मैट, यह बहुत स्पष्ट है। मैं वंश और भाई बहनों के बारे में इस subtlety के बारे में सोचा नहीं बेवकूफ महसूस करता हूँ। यहां बताया गया है कि मैंने कोड को दोबारा कैसे किया: https://gist.github.com/2585965। –