如何在另一个div内每X个div添加关闭和打开div标签？

Question

我使用以下代码：

var groups = {};
$(".product-list .product-list_item").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 class="product-list_row" />').each(function(i){
        if (((i+1) % 3) == 0)
            $(this).after('</div><div class="product-list_row">');
        });
    }

我想得到这个：

<div class="product-list">
  <div class="product-list_item jackson">x</div>
  <div class="product-list_item jackson">x</div>
  <div class="product-list_item jackson">x</div>
  <div class="product-list_item jackson">x</div>
  <div class="product-list_item mason">x</div>
  <div class="product-list_item mason">x</div>
  <div class="product-list_item mason">x</div>
</div>
<div class="whatever">
  <p>hello i'm a different div</p>
</div>
<div class="product-list">
  <div class="product-list_item taylor">x</div>
  <div class="product-list_item taylor">x</div>
  <div class="product-list_item pencil">x</div>
  <div class="product-list_item pencil">x</div>
  <div class="product-list_item pencil">x</div>
</div>

看起来像这样：

<div class="product-list">
  <div class="product-list_row">
    <div class="product-list_item jackson">x</div>
    <div class="product-list_item jackson">x</div>
    <div class="product-list_item jackson">x</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item jackson">x</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item mason">x</div>
    <div class="product-list_item mason">x</div>
    <div class="product-list_item mason">x</div>
  </div>
</div>
<div class="whatever">
  <p>hello i'm a different div</p>
</div>
<div class="product-list">
  <div class="product-list_row">
    <div class="product-list_item taylor">x</div>
    <div class="product-list_item taylor">x</div>
  </div>
  <div class="product-list_row">
    <div class="product-list_item pencil">x</div>
    <div class="product-list_item pencil">x</div>
    <div class="product-list_item pencil">x</div>
  </div>
</div>

我怎样才能让jQuery插入一个结束标记并打开.product-list_row的标记，就像</div><div class="product-list_row">一样，不忽略结束标记，然后在同一个新的开始标记中添加一个结束标记。如果你看看上面直接分离“杰克逊”类组，那就是我试图得到它的方式。

它将使用动态创建的product-list_row div正确地包装具有相同类名的分组div。然后在该组中，它正确地在X个div之后找到并插入新的html，但它只是没有正确地格式化我的需要，因为jQuery是自动关闭并删除我的结束标记。

我在这里找到了一些建议，引导我找到我正在弄乱的代码，我在这里做了一个小提琴：http://jsfiddle.net/jonnyplow/Lqj73ewv/

有任何想法吗？

Answer 1

我不会使用jQuery来改变html标签结构。

也许你可以像这样改变你的for循环。

var groups = {};
$(".product-list .product-list_item").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 class="product-list_row" />');
  $(groups[i]).wrapAll('<div class="product-list_row" />').each(function(i) {
    if (((i + 1) % 3) == 0)
      $(this).after('</div><div class="product-list_row">');
  });
}*/

for (var i in groups) {
  var group = groups[i];
  var count=0;
  var rowEles=[];
  for(var j=0;j<group.length;j++){
    rowEles.push(group[j]);
    count++;
    if(rowEles.length==3||count==group.length){
      $(rowEles).wrapAll('<div class="product-list_row" />');
      rowEles=[];
    }
  }
}

body {
  padding: 20px;
}

.product-list {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid red;
}

.product-list_row {
  border: 1px solid #bbb;
  padding: 5px;
  margin-bottom: 10px;
}

.whatever {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product-list">

  <div class="product-list_item jackson">x</div>
  <div class="product-list_item jackson">x</div>
  <div class="product-list_item jackson">x</div>
  <div class="product-list_item jackson">x</div>
  <div class="product-list_item mason">x</div>
  <div class="product-list_item mason">x</div>
  <div class="product-list_item mason">x</div>

</div>
<div class="whatever">
  hello i'm different
</div>
<div class="product-list">

  <div class="product-list_item taylor">x</div>
  <div class="product-list_item taylor">x</div>
  <div class="product-list_item pencil">x</div>
  <div class="product-list_item pencil">x</div>
  <div class="product-list_item pencil">x</div>

</div>