jQuery: Find the text of a list item that contains a nested ul

Question

I have the following:

item1
    

        
sub1
        
sub2
    

        

Answer 1

you're having a hard time because text() does what it should - returns the text of this and all child elements. The easiest thing to do is to add another tag to every <li>, and use this tag.
For example:

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

And then you have a simple selector:

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

or, if possilbe (depending on your style), you may add the event to the span:

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

If you cannot add these <span>s (as you say) you can use jQuery's .contents() to add them for you, similar to what was done here:

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

Answer 2

This checks if the list item has any children and if so it filters out only the text nodes and concatenates the result (in this case it will work for text elements wherever they're put in the li). If you only ever want to check for elements at the start you can avoid the for loop and just work with this.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 3

Normal DOM methods allow to access text contents for just one element, rather than jquery:

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

firstChild in this case is the textNode beneath the li element

Answer 4

What about this approach? Clone the object, remove the clone's children and then find the text content.

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

Perhaps not the most efficient approach, but it's entirely intuitive, pretty tidy, and you don't have to muck with your html.

Answer 5

Another way to achieve same

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

Answer 6

So this mechanism pulls out the html from the child element, replaces the newlines with nothing, and then returns the string only up to the first "<" character. I also added event.stopPropagation to avoid calling the click event bubbling up to the parent.

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