1. घर
  2. सवाल और जवाब
  3. एचटीएमएल

एचटीएमएल

2011-08-23 9 views
29

की एक स्ट्रिंग खोज करने के लिए अगर मैं इस कोड को चलाने के jQuery का उपयोग करना -एचटीएमएल

var html= '<html><head></head><body><div class="bar"></div></body></html>'; 
console.log($(html).find('div'));

मैं कोई परिणाम नहीं मिले मिलता है, अगर मैं इस कोड को चलाने - मैं वापस आ एक भी परिणाम प्राप्त फिर

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; 
console.log($(html).find('div'));

- आंतरिक div (<div class="bar"></div>)। मैं पहले कोड स्निपेट को एक परिणाम और दूसरा स्निपेट दो परिणाम लौटने की उम्मीद करता।

var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); 
console.log(code.find('div'));

लेकिन इस कोड को अलर्ट 'div' दो बार - -

इसी तरह, इस कोड को कोई परिणाम

var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); 
code.each(function() { 
    alert(this.nodeName); 
})

दूसरा टुकड़ा का परिणाम को देखते हुए, मैं पहली बार कोड की उम्मीद है | स्निपेट दो परिणाम लौटने के लिए। क्या कोई कृपया बता सकता है कि मुझे नतीजे क्यों मिल रहे हैं?

http://jsfiddle.net/ipr101/GTCuv/

स्रोत

2011-08-23 ipr101

+0

मैं 'console.log'' alert' लिए बदल गया है, और यह 'सतर्क कर दिया [वस्तु वस्तु]', तो यह कुछ ... –

+2

@Eran ज़िम्मरमैन पाया गया है चाहिए: ऐसा इसलिए है क्योंकि चयनकर्ता के लिए मिले मैचों की मात्रा के बावजूद jQuery हमेशा एक ऑब्जेक्ट देता है। –

+2

मुझे लगता है कि [ऑब्जेक्ट ऑब्जेक्ट] खाली सरणी jQuery रिटर्न को संदर्भित करता है। – ipr101

उत्तर

33

चलिए इस प्रश्न को दो भागों में विभाजित करते हैं।

पहले:

var html= '<html><head></head><body><div class="bar"></div></body></html>'; 
console.log($(html).find('div'));

और

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; 
console.log($(html).find('div'));

क्योंकि jQuery() docs के अनुसार काम नहीं करते:

जब जटिल HTML में गुजर, कुछ ब्राउज़र एक डोम उत्पन्न नहीं हो सकता है जो वास्तव में उपलब्ध एचटीएमएल स्रोत को दोहराता है। जैसा कि बताया गया है, हम पास किए गए HTML को पार्स करने के लिए ब्राउज़र का .innerHTML गुण का उपयोग करते हैं और वर्तमान दस्तावेज़ में डालें। इस प्रक्रिया के दौरान, कुछ ब्राउज़र <html>, <title>, या <head> तत्वों जैसे कुछ तत्वों को फ़िल्टर करते हैं। नतीजतन, डाले गए तत्व मूल स्ट्रिंग के प्रतिनिधि प्रतिनिधि नहीं हो सकते हैं।

  • पहले कोड ब्लॉक में, अपने <html>, <head>, और <body> टैग बाहर छीन लिया जा रहा है, और <div class="bar"></div> बनी हुई है। find केवल <div> के अंदर खोज करता है, और कुछ भी नहीं मिला।
  • दूसरे कोड ब्लॉक में, आपके <html>, <head>, और <body> टैग छीन रहे हैं, और <div><div class="bar"></div></div> बनी हुई है। परिणाम के अंदर find खोज, और एक एकल <div> पाता है।

अपने दूसरे भाग के लिए के रूप में:

var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); 
console.log(code.find('div'));

आप पहली बार jQuery एक स्ट्रिंग है, जो यह लेता है और दो <div> के साथ एक jQuery वस्तु में बनाता दे। फिर, find प्रत्येक <div> में खोजें, कुछ भी नहीं पाता है और कोई परिणाम नहीं देता है।

इसके बाद,

var code = $("<div id='foo'>1</div><div id='bar'>2</div>"); 
code.each(function() { 
    alert(this.nodeName); 
})

each छोरों में jQuery वस्तु के माध्यम से, दो बनाया <div> के के प्रत्येक लेने, और उनके नोड नाम सचेत करता है। इसलिए, आपको दो अलर्ट मिलते हैं।

स्रोत

2011-08-23 10:20:15

2

तीसरा उदाहरण में .find, प्रत्येक मिलान किया तत्व में बच्चों खोज करता है। आपके div एस के अंदर div बच्चे नहीं हैं (उनके पास कोई बच्चा नहीं है), इसलिए .find(anything) कोई तत्व वापस नहीं करेगा।

.each, दूसरे हाथ पर, सेट, जो div रों शामिल नहीं है में मौजूदा तत्वों से अधिक दोहराता (- div रों वहाँ दो मिलान किया तत्व हैं)।

आपके पहले उदाहरण में <html> के लिए, मुझे यकीन नहीं है - शायद आपको पेज लोड होने के बाद दूसरा <html> तत्व बनाने की अनुमति नहीं है। $('<html><head></head><body><div class="bar"></div></body></html>'); केवल div देता है इसलिए .find कुछ भी वापस नहीं करता है।

स्रोत

2011-08-23 10:19:07 pimvdb

+2

jQuery (या अधिक सटीक रूप से, ब्राउज़र) 'html',' head' और 'body' टैग को हटा देता है और केवल' बॉडी 'सामग्री को रखता है। –

+0

@ फ़ेलिक्स क्लिंग: धन्यवाद, जानना अच्छा है। वह निराशाजनक हो सकता है। – pimvdb

13

उत्तर बहुत आसान है। जब आप jQuery (html) का उपयोग करके ऑब्जेक्ट करते हैं तो यह नोड्स का पदानुक्रम बनाता है, और जब आपको 'div' जैसे कुछ नोड मिलते हैं, तो यह मूल तत्वों को छोड़कर पूरे पदानुक्रम में खोज करता है, और आपके पहले उदाहरण में, आपके बच्चे में 'div' नहीं होता है नोड्स। और आपके दूसरे उदाहरण में आपके पास केवल एक बच्चा 'div' नोड है।

इसलिए यदि आप पूरे पदानुक्रम में एक अतिरिक्त रूट नोड रखते हैं, तो आप आसानी से अपने सभी नोड्स पा सकते हैं।

$(html).filter('.bar')

या सभी divs: वर्ग पट्टी के साथ div के लिए

var html= '<html><head></head><body><div class="bar"></div></body></html>';

खोज:

स्ट्रिंग को देखते हुए: आसान तरीका की तरह

var html= '<html><head></head><body><div class="bar"></div></body></html>'; 
console.log($('<div></div>').append(html).find('div')); 

var html= '<html><head></head><body><div><div class="bar"></div></div></body></html>'; 
console.log($('<div></div>').append(html).find('div'));

स्रोत

2011-08-23 12:01:01 vicky

+1

इस तरह यह किया जाना चाहिए। स्वीकार किए गए उत्तर काम नहीं करेंगे यदि 1 से अधिक रूट तत्व हैं। – ProblemsOfSumit

3

इस प्रकार है:

$(html).filter('div')

वर्ग के साथ वस्तु रिटर्न bar

स्रोत

2017-01-12 19:11:30 Jeff

+0

महान! तुम मेरा दिन बचाओ! –

संबंधित मुद्दे

 संबंधित मुद्दे