javascript - 选择元素和后续文本

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"，不好意思)。

Answer 1

我能想到的最短的:

$('.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>