How to get text node after element?

Question

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...

http://stackoverflow.com/questions/6925088/get-the-text-after-span-element-using-jquery — Bugs, Oct 22 '12 at 18:59

score 74 · Accepted Answer · answered Oct 22 '12 at 19:00

74

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

answered Oct 22 '12 at 19:00

Selvakumar Arumugam

79,297
15
120
134

You can also remove text by editing this property. – Alex78191 Jun 30 '22 at 14:07

David Thomas · Answer 2 · 2012-10-22T19:17:05.293

9

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.

edited Oct 22 '12 at 19:17

answered Oct 22 '12 at 18:59

David Thomas

249,100
51
377
410

If you are going to use `filter` you can very well use `.text()` on text nodes.. no need `[0].nodeValue`.. just that jQuery doesn't have a way to select the text node. – Selvakumar Arumugam Oct 22 '12 at 19:03
This does not yield the text. – Kevin Boucher Oct 22 '12 at 19:06
Even though OP is asking for the node, it seems that the text is actually wanted. Just add `.data` or `.nodeValue` to the end. – I Hate Lazy Oct 22 '12 at 19:08
@KevinBoucher: it certainly *seems* to, in Chromium 18/Ubuntu 11.04. What are you testing in? No, you're right. Edited to correct! – David Thomas Oct 22 '12 at 19:08
@KevinBoucher `nextSibling` is to get the node.. to get the text you need to do `nodeValue` – Selvakumar Arumugam Oct 22 '12 at 19:09
@David, in the fiddle I changed the `console.log` to `alert` and got '[Object text]' – Kevin Boucher Oct 22 '12 at 19:09
Yeah; I realised...hence the addition of `.nodeValue` and an updated demo. =) – David Thomas Oct 22 '12 at 19:10

score 3 · Answer 3 · answered Oct 22 '12 at 19:01

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();

answered Oct 22 '12 at 19:01

Kevin Boucher

16,426
3
48
55

+1 assuming this is the label *(very likely)*, but I'd use a valid Selectors API selector instead so that `querySelectorAll` can be utilized. `$('#something + label')` – I Hate Lazy Oct 22 '12 at 19:03
What's wrong with the next siblings selector? http://api.jquery.com/next-siblings-selector/ – Kevin Boucher Oct 22 '12 at 19:05
1

Nothing at all, but the `:first` is a proprietary Sizzle selector, so it defaults to Sizzle's JavaScript based selector engine instead of the browser's native one. – I Hate Lazy Oct 22 '12 at 19:06
1

@KevinBoucher Right, but the point is it isn't a CSS selector, therefore querySelectorAll can't be utilized, meaning the string then has to be parsed. – Kevin B Oct 22 '12 at 19:10
It's a Sizzle selector, and Sizzle is included in jQuery. Either way, you're forfeiting a standards compliant selector that gives you the benefit of being utilized by native code. ...like @KevinB said, but it's more than just the string parsing. The entire DOM selection is done in JavaScript instead of using much faster native code. – I Hate Lazy Oct 22 '12 at 19:10
3

Can't use label, I can't touch the HTML – Itay Moav -Malimovka Oct 22 '12 at 19:23

score 0 · Answer 4 · answered Feb 25 '19 at 17:50

Just to toss in a example to a way old question, wrap text in a label

$('input[type="checkbox"]')
  .each(function(index, el) {
    var textNode = $(el.nextSibling);
    if (textNode[0].nodeType == Node.TEXT_NODE) {
      let checkwrap = $(el).wrap('<label class="found"></label>').closest('.found');
      textNode.appendTo(checkwrap);
    }
  });

.found {
  border: solid cyan 1px;
  color: blue;
  padding: 0.5em;
  display: inline-block;
  margin: 0.3em;
}

label.found {
  color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<span>in a span</span>
<input type="checkbox" name='something' value='v1' /> All the world <br />
<input type="checkbox" name='something2' value='v2' /> All the world 2 <span>in a span</span><br />
<input type="checkbox" name='something3' value='v3' /> All the world 3 <span>in a span</span>
<input type="checkbox" name='something4' value='v4' /> All the world 4<span>in a span also</span>

there, wrapped in a label, oh wait, that is an answer, just have to get the nextSibling isolated by type

How to get text node after element?

4 Answers4

Linked

Related