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，这适用于可能位于group-X内的任意数量的#groups，使其更加灵活。如果你能够改变你的标记你可以使这更简单，但我猜这是否是一个选项，你不会首先问这个问题：）

用jQuery中的另一个div封装一组div

2 个答案: