What I have:
A checkbox inside a label.
<label for="foo">
<input type="checkbox" id="foo" />bar
</label>
What I need:
Using jQuery, I need to to wrap the text following the checkbox (i.e. "bar"), in a span element.
<label for="foo">
<input type="checkbox" id="foo" /><span>bar</span>
</label>
What I've tried:
$('label').wrapInner('<span></span>');
This does not exclude the checkbox as required.
jQuery wrap() method is used to wrap specified HTML elements around each selected element. The wrap () function can accept any string or object that could be passed through the $() factory function. Syntax: $(selector).
jQuery wrap() Method The wrap() method wraps specified HTML element(s) around each selected element.
The wrapped set is simply a list of DOM elements(with their children) in the order in which they are defined in the current document that matches a selector or in the order in which they have been created on the fly with the $(html) function.
If you want to wrap the text node, you could filter the contents of the element based on whether the nodeType
property is 3 (which is the value of a text node), and wrap the returned text node.
$('label').contents().filter(function () {
return this.nodeType === 3;
}).wrap('<span></span>');
Alternatively, if you know the text node will always be the next sibling of the input
element, you could select the next sibling node using the nextSibling
property:
$('label input').each(function () {
$(this.nextSibling).wrap('<span></span>');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With