javascript - 如何添加或包装每个标签和 div？

Question

我有这个标签和divs 序列，我需要环绕每组 1 个标签 + 1 个 div 另一个 div。我知道我必须使用 .each.wrap或者.prepend我需要帮助。我怎样才能做到这一点？

HTML：

<label>label</label>
<div>text</div>
<label>label</label>
<div>text</div>

结果应该是这样的：

<div class="1">
  <label>label</label>
  <div>text</div>
</div>
<div class="1">
  <label>label</label>
  <div>text</div>
</div>

score 2 · Accepted Answer

或者，使用.wrapAll().

$("label").each(function(){
  var $this = $(this);
  $this.add($this.next()).wrapAll("<div class='1'/>");
});

score 2 · Accepted Answer

假设这个标记总是这样：

$("label").each(function () {
  $(this).next("div").andSelf().wrapAll("<div>");
});

您可以省略"div"of .next，但它可以防止其他元素妨碍您。

score 1 · Accepted Answer

您可以通过遍历标签并包装/附加每个标签来做到这一点：

$('label').each(function() {
    $(this).wrap('<div class="l"/>').parent().next().appendTo($(this).parent());
});

score 1 · Accepted Answer

这可能不是最有效的方法，但经过多次不同的尝试，这就是我想出的：

$('label').each(function() {
  var next = $(this).nextAll('div')[0];
  $(this).wrap('<div class="new" />').append(next);
});

我尝试过的所有其他方法都会选择标签和 div 分别迭代它们，所以它不会将它们配对在同一个 div 下。div将 next 保存到变量的额外工作是因为nextAll()对同一父级的兄弟姐妹进行操作 - 可能label会成为新div之前的子级nextAll()，否则会被评估。

4 回答 4