如何在另一个 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 像 </div><div class="product-list_row"> 一样为 .product-list_row 插入结束标签和开始标签，而不忽略结束标签，然后向其添加结束标签相同的新开始标签。如果您直接查看上面 "jackson" class 组的拆分，这就是我试图得到它的方式。

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

我在这里找到了一些建议，这些建议让我找到了我正在处理的代码，我在这里做了一个 fiddle：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>

如何在另一个 div 中每隔 X 数量的 div 添加结束和开始 div 标签？

How to add closing and opening div tags every X amount of divs inside another div?

javascript

tags

jquery