javascript - 每 4 "thumb divs"创建新行

Question

我想要实现的是将每 4 个 div 放入新创建的行中

这是我的 html 输入

<div class="container">
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
  <div class="thumb"></div>
</div>

我希望它看起来像

<div class="container">
  
  <div class="row">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
  
  <div class="row">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
  
</div>

我从

开始

<script type="text/javascript">
var thumb = document.getElementsByClassName('thumb');
if (thumb.length < 4) {

}
</script>

但我不知道如何从这一点继续下去

Answer 1

试试这个，

$(document).ready(function(){
    var divs = $(".container .thumb");
    for(var i = 0; i < divs.length; i+=4) {
        divs.slice(i, i+4).wrapAll("<div class='row'></div>");
    }
});

更多详情refer this link