javascript - 如何在另一个 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">如果它不忽略结束标签，然后将结束标签添加到同一个新的开始标签中。如果你看看上面“ jackson ”类(class)组的 split ，这就是我试图得到它的方式。

它将使用动态创建的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>