[英]How to wrap div around items?
我的代码在每个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>
JSFIDDLE: http : //jsfiddle.net/nvnLa/1/embedded/result/
如果使用Id标识内容div,并使用类对它们进行分组,则可以执行以下操作:
$(".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>
在小提琴中检查
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.