我使用以下代码:
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/
有任何想法吗?
我不会使用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>