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

And wish to end up with:

<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，但不是我想要的方式。有任何建议将不胜感激。

谢谢。

- lafoaug

---

他们是否在另一个您可以识别的<div>内部，而不是在页面上循环每个div？ - Nick Craver

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

- Andy E

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') +"' />");
}

这里有一个演示，它可以适用于任何数量的group-X，这使它更加灵活。如果您能够更改您的标记，那么这将变得更简单，但我猜如果这是一个选项，您在第一时间就不会问这个问题 :)

- Nick Craver

---

+1 为了通用性，我考虑在我的答案中添加一个类似的解决方案，但决定等待并观察是否有必要。你可能需要在那个 for...in 中添加一个 hasOwnProperty 检查，或者你可以直接在对象上使用 $.each()。 - Andy E