Question

I have the following code..

<span class="under"> 
texthere
    <ul class="list">
        <li> list text here</li>
    </ul>
</span>

When i run $(".under").text() I get “textherelist text here” .

I’ve tried $(".under :not(.list)").text() and get underfined.

I also dont get the correct output for $(".under").not(".list").text()

So my last attemp was $(".list").parent().text()

which results in textherelist text here

Where am i going wrong with something so simple?

p.s. doesn’t have to be jQuery can be JavaScript if its simpler.

Wanted result: texthere

Answer 1

From the docs:

Description: Get the combined text contents of each element in the set
of matched elements, including their descendants.

So yes, that behavior is expected.

You can try this to get only the immediate text node of a selector:

$('.under').contents().filter(function(){ return(this.nodeType == 3); }).text()

Explanation:

.contents() (docs) returns the children of a selector, including textnodes

Description: Get the children of each element in the set of matched
elements, including text and comment nodes.

.filter() takes a callback to return only things you need, based on this, you are only taking those with nodeType == 3, which is a text node.

http://jsfiddle.net/R4Pzf/