Select element and subsequent text

Question

I'm having following markup:

<div class="controls"> <input type="radio" id="sex" name="sex" value="m"> Boy <input type="radio" id="sex" name="sex" value="f"> Girl <input type="radio" id="sex" name="sex" value="t"> Twins </div>

How can I select each radio button and it's subsequent text. My goal is to wrap both in a label, so the output would be:

<div class="controls"> <label><input type="radio" id="sex" name="sex" value="m"> Boy</label> <label><input type="radio" id="sex" name="sex" value="f"> Girl</label> <label><input type="radio" id="sex" name="sex" value="t"> Twins</label> </div>

Unfortunately, the markup is created by a CMS. (It also adds id="sex" multiple times, blergh).

Sounds like you need a better CMS...

James Donnelly
– James Donnelly

2014-10-24 13:56:10 +00:00
Commented Oct 24, 2014 at 13:56 — James Donnelly
– James Donnelly, Commented Oct 24, 2014 at 13:56
Yeah, you should never have duplicate IDs

Stan Shaw
– Stan Shaw

2014-10-24 14:08:15 +00:00
Commented Oct 24, 2014 at 14:08 — Stan Shaw
– Stan Shaw, Commented Oct 24, 2014 at 14:08

dfsq · Accepted Answer · 2014-10-24 13:58:50Z

The shortest I can think of:

$('.controls :radio').each(function() { $(this).add(this.nextSibling).wrapAll('<label>'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="controls"> <input type="radio" id="sex" name="sex" value="m"> Boy <input type="radio" id="sex" name="sex" value="f"> Girl <input type="radio" id="sex" name="sex" value="t"> Twins </div>

Collectives™ on Stack Overflow

Select element and subsequent text

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related