选择元素和后续文本

Question

我有以下标记：

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

如何选择每个单选按钮及其后续文本。我的目标是将两者都包装在标签中，因此输出将是：

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

不幸的是，标记是由CMS创建的。 （它还多次添加id="sex"，blergh）。

Answer 1

我能想到的最短的时间：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;