jQuery: मैं निम्नलिखित है सूची आइटम के पाठ कि एक नेस्टेड उल

Question

शामिल खोजें:

<ul id="list"> 
<li>item1 
    <ul> 
     <li>sub1</li> 
     <li>sub2</li> 
    </ul>  
</li> 
</ul> 

मैं एक ली क्लिक करें घटना का जवाब और कहीं और ली के पाठ का उपयोग करना चाहते हैं। हालांकि, अगर क्लिक उस ली पर है जिसमें घोंसला वाला उल शामिल है, तो मुझे निश्चित रूप से सभी तत्वों का पाठ मिलता है।

$("#list li").click(function() { 
    alert($(this).text()); 
}); 

रिटर्न, item1sub1sub2 अपेक्षा के अनुरूप।

मैं यह नहीं समझ सकता कि आइटम 1 ली क्लिक होने पर 'item1' कैसे प्राप्त करें। मैंने बिना किसी किस्मत के निम्नलिखित (अन्य चीजों के साथ) की कोशिश की:

$("#list li").click(function() { 
    alert($(this).filter("ul").text()); 
}); 

कोई विचार?

संपादित

यह एक उदाहरण का एक टुकड़ा है - यह गहरी कई स्तरों हो सकता है। मैं सूची आइटम टेक्स्ट को एक अवधि या अन्य मार्कअप में लपेटना नहीं चाहता हूं।

Answer 1

इस दृष्टिकोण के बारे में क्या? ऑब्जेक्ट क्लोन करें, क्लोन के बच्चों को हटाएं और फिर टेक्स्ट सामग्री ढूंढें।

$("#list li").click(function() { 
    alert($(this).clone().children().remove().end().text()); 
} 

शायद नहीं सबसे कुशल दृष्टिकोण है, लेकिन यह पूरी तरह से सहज ज्ञान युक्त, बहुत साफ है, और आप अपने html के साथ गंदगी के लिए नहीं है।

Answer 2

आपको कठिन समय हो रहा है क्योंकि text() यह करता है कि यह क्या करना चाहिए - इस और सभी बच्चों के तत्वों का पाठ देता है। करने के लिए सबसे आसान बात यह है कि प्रत्येक <li> पर एक और टैग जोड़ें, और इस टैग का उपयोग करें।
उदाहरण के लिए:

$("#list li").click(function() { 
    alert($(this).find("span").eq(0).text()); 
}); 

या, possilbe अगर (अपनी शैली के आधार पर), तुम अवधि घटना जोड़ सकते हैं::

<ul id="list"> 
<li><span>item1</span> 
    <ul> 
     <li><span>sub1</span></li> 
     <li><span>sub2</span></li> 
    </</ul>  
</li> 
</ul> 

और फिर आप एक सरल चयनकर्ता है

$("#list span").click(function() { 
    alert($(this).text()); 
}); 

यदि आप इन <span> एस (जैसा कि आप कहते हैं) जोड़ नहीं सकते हैं तो आप उन्हें यहां जोड़ने के लिए jQuery के .contents() का उपयोग कर सकते हैं, जैसा कि यहां किया गया था:

Hide B in <x>A<br/>B</x>

Answer 3

तो इस तंत्र, चाइल्ड तत्व से एचटीएमएल बाहर खींचती है कुछ भी नहीं के साथ नई-पंक्तियों की जगह, और उसके बाद ही पहली "<" चरित्र अप करने के लिए स्ट्रिंग देता है। मैंने माता-पिता को क्लिक करने वाले क्लिक ईवेंट को कॉल करने से बचने के लिए event.stopPropagation भी जोड़ा।

<script type="text/javascript"> 
$("#list li").click(function(event) { 
    var sourceHTML = $(this).html().replace(/\n/g,'').replace(/<.*/,''); 
    alert(sourceHTML); 
    event.stopPropagation(); 
}); 
</script> 

Answer 4

मुझे लगता है कि आपको प्रत्येक विधि का उपयोग करने की आवश्यकता है। यदि सूची आइटम किसी भी बच्चे हैं

$(document).ready(function() { 
     $('ul').each(function() { 
      $(this).find('li').click(function() { 
       var listItem = this; 
       alert($(listItem).text()); 
      }); 
     }) 
    }); 

निम्न मार्कअप वाला

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 

Answer 5

यह चेक और यदि ऐसा है तो यह केवल पाठ नोड्स को फ़िल्टर कर देता और (परिणाम संयोजित इस में: तो निम्न स्क्रिप्ट की कोशिश मामला यह टेक्स्ट तत्वों के लिए काम करेगा जहां भी उन्हें ली में रखा जाएगा)। यदि आप केवल शुरुआत में तत्वों की जांच करना चाहते हैं तो आप लूप से बच सकते हैं और बस इसके साथ काम कर सकते हैं।firstChild

$("#list li").click(function(e) { 
    if ($(this).children().length > 0) { 
     var text = ""; 
     for (var i = 0; i < this.childNodes.length; i++) { 
      var node = this.childNodes[i]; 
      if (node.nodeType === 3 && $.trim(node.nodeValue).length > 0) { 
       text += $.trim(node.nodeValue); 
      } 
     } 
     alert(text); 
    } 
    else { 
     alert($(this).text()); 
    } 
    e.stopPropagation(); 
}); 

Answer 6

सामान्य डोम तरीकों बल्कि jQuery से, सिर्फ एक तत्व के लिए पाठ सामग्री का उपयोग करने की अनुमति:

$("#list li").click(function() { 
    alert($(this)[0].firstChild.textContent) 
}); 

इस मामले में firstChild li तत्व

Answer 7

नीचे textNode एक और तरीका है एक ही

प्राप्त करने के लिए है

$("#list li").click(function() { 
    alert($(this).contents().not('ul,ol').text()); 
});