41

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

1

4 Answers 4

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 
Sign up to request clarification or add additional context in comments.

1 Comment

You can also remove text by editing this property.
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.

7 Comments

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.
This does not yield the text.
Even though OP is asking for the node, it seems that the text is actually wanted. Just add .data or .nodeValue to the end.
@KevinBoucher: it certainly seems to, in Chromium 18/Ubuntu 11.04. What are you testing in? No, you're right. Edited to correct!
@KevinBoucher nextSibling is to get the node.. to get the text you need to do nodeValue
|
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(); 

6 Comments

+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')
What's wrong with the next siblings selector? api.jquery.com/next-siblings-selector
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.
@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.
Can't use label, I can't touch the HTML
|
0

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.