How to get text node after element?

Using jQuery. I have the following html:

<input type="checkbox" name='something' value='v1' /> All the world <br />

How would I get ONLY the text. what selector should I use? (I need the "All the world")

I also can not touch the HTML...


Solution 1:

Try using the DOM function .nextSibling to pick the next node (including the text nodes) and use nodeValue to get the text All the world

$(':checkbox')[0].nextSibling.nodeValue

Solution 2:

Just use the plain-JavaScript nextSibling, though you have to 'drop out of' jQuery to use that method (hence the [0]):

var text = $('input:checkbox[name="something"]')[0].nextSibling.nodeValue;

JS Fiddle demo.

And I finally realised what was wrong with my other suggestion, which has been fixed:

var text = $('input:checkbox[name="something"]').parent().contents().filter(
    function(){
        return this.nodeType === 3 && this.nodeValue.trim() !== '';
    }).first().text();

JS Fiddle demo.

And to make sure that you're only getting the textNodes from before the br (though frankly this is becoming overly-complex, and the first suggestion works far more easily and, I suspect reliably):

var text = $('input:checkbox[name="something"]').parent().contents().filter(
    function(){
        return this.nodeType === 3 && this.nodeValue.trim() !== '' && $(this).prevAll('br').length === 0;
    }).text();

JS Fiddle demo.

Solution 3:

If you added a label to your markup (which is recommended), you could do it this way:

HTML

<input type="checkbox" id="something" name="something" value="v1" /><label for="something">All the world</label> <br />

JS

var text = $( '#something ~ label:first' ).text();