我的代码每 5 个子 div 包裹一个 div。 但包装只能发生在div“partnerwrap”中,有人可以帮助我吗?
var divs = $(".partnerwrap > .partner_item");
for (var i = 0; i < divs.length; i += 5) {
divs.slice(i, i + 5).wrapAll("<div class='group'></div>");
}
.partner_item {
width: 50px;
height: 50px;
margin: 10px;
float: left;
background-color: #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content1">
<div class="partnerwrap">
<div class="partner_item even">1</div>
<div class="partner_item odd">2</div>
<div class="partner_item even">3</div>
<div class="partner_item odd">4</div>
<div class="partner_item even">5</div>
<div class="partner_item odd">6</div>
<div class="partner_item even">7</div>
<div class="partner_item odd">8</div>
</div>
</div>
<div class="content2">
<div class="partnerwrap">
<div class="partner_item even">9</div>
<div class="partner_item odd">10</div>
</div>
</div>
最佳答案
如果你使用Ids来标识内容div,并使用class来对它们进行分组,你可以这样做:
$(".content").each(function() {
var divs = $(".partnerwrap > .partner_item", this);
for (var i = 0; i < divs.length; i += 5) {
divs.slice(i, i + 5).wrapAll("<div class='group'></div>");
}
});
.partner_item {
width: 50px;
height: 50px;
margin: 10px;
float: left;
background-color: #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content1">
<div class="partnerwrap">
<div class="partner_item even">1</div>
<div class="partner_item odd">2</div>
<div class="partner_item even">3</div>
<div class="partner_item odd">4</div>
<div class="partner_item even">5</div>
<div class="partner_item odd">6</div>
<div class="partner_item even">7</div>
<div class="partner_item odd">8</div>
</div>
</div>
<div class="content2">
<div class="partnerwrap">
<div class="partner_item even">9</div>
<div class="partner_item odd">10</div>
</div>
</div>
查看fiddle
关于javascript - 如何将 div 包裹在项目周围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21856741/