将一组div与另一个div封装在jQuery中

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

Answer 2

如果你需要一个更通用的解决方案，例如你不知道组的数量(在我的经验中更常见的情况)，你可以这样做：

var groups = {};
$("#groups div").each(function(i) {
    var c = $(this).attr("class");
    if(!groups[c]) groups[c] = [];
    groups[c].push(this);
});
for(var i in groups) {
    $(groups[i]).wrapAll("<div id='" + i.replace('group', 'set') +"' />");
}

You can view a demo here，这将适用于#groups中的任意数量的group-X，从而使其更加灵活。如果您能够更改您的标记，您可以使其更简单，但我猜如果这是一个选项，您就不会在第一时间问这个问题:)