选择元素和后续文本

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

Answer 1

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>