javascript - 在jQuery中用另一个div封装一组div

Question

我对如何做到这一点感到有点难过。

我正在使用 jQuery 并希望用一个 div 封装某些 div 集。

例如我有:

<div id="groups">  
    <div class="group-1">x</div>
    <div class="group-1">x</div>
    <div class="group-2">x</div>
    <div class="group-2">x</div>
    <div class="group-3">x</div>
</div>

并希望以:

<div id="groups">  
  <div id="set-1">
    <div class="group-1">x</div>
    <div class="group-1">x</div>
  </div>
  <div id="set-2">
    <div class="group-2">x</div>
    <div class="group-2">x</div>
  </div>
  <div id="set-3">
    <div class="group-3">x</div>
  </div>
</div>

我可以循环遍历每个 div 并在每个 div 周围添加一个 div，但不是我上面想要的方式。任何建议表示赞赏。

谢谢。

Answer 1

参见 .wrapAll()

$(".group-1").wrapAll('<div id="set-1" />');
$(".group-2").wrapAll('<div id="set-2" />');
$(".group-3").wrapAll('<div id="set-3" />');

如果您需要选择器仅匹配#groups div 内的类，请使用子选择器，例如$('#groups > .group-1')