javascript - 每 4 个 div 换行 - 错误行为

Question

我使用下面的代码将每 4 个带有 .wrap4 类的 div 包装在一个带有 .wrapList 类的 div 中

js代码:

function Wrap(){
        var $children = $('.wrap4');
        for(var i = 0, l = $children.length; i < l; i += 4) {
            $children.slice(i, i+4).wrapAll('<div class="wrapList"></div>');
        }
};

例如:

<div class="row">
  <div class="wrap4">1</div>
  <div class="wrap4">2</div>
  <div class="wrap4">3</div>
  <div class="wrap4">4</div>
  <div class="wrap4">5</div>
  <div class="wrap4">6</div>
  <div class="wrap4">7</div>
</div>

结果:

<div class="row">
  <div class="wrapList">
    <div class="wrap4">1</div>
    <div class="wrap4">2</div>
    <div class="wrap4">3</div>
    <div class="wrap4">4</div>
   </div>
   <div class="wrapList">
    <div class="wrap4">5</div>
    <div class="wrap4">6</div>
    <div class="wrap4">7</div>
  </div>
</div>

效果很好，但是如果包装前的 div 是两行而不是一行，例如:

<div class="row">
    <div class="wrap4">1</div>
    <div class="wrap4">2</div>
    <div class="wrap4">3</div>
</div>
<div class="row">
  <div class="wrap4">4</div>
  <div class="wrap4">5</div>
  <div class="wrap4">6</div>
  <div class="wrap4">7</div>
</div>

结果将不考虑行，它将 4 移动到顶行以完成一行 4 个 div，例如:

<div class="row">
  <div class="wrapList">
    <div class="wrap4">1</div>
    <div class="wrap4">2</div>
    <div class="wrap4">3</div>
    <div class="wrap4">4</div> (this div belong to the row below)
  </div>
</div>
<div class="row">
  <div class="wrapList">
    <div class="wrap4">5</div>
    <div class="wrap4">6</div>
    <div class="wrap4">7</div>
  </div>
</div>

如何让代码尊重行？

非常感谢!!!

Answer 1

您可以遍历行，只对每行的子行执行换行:

function Wrap(){
        var $rows = $('.row');
        for (var h = 0, r; r = $rows[h]; h++) {
            var $children = $(r).find('.wrap4');
            for(var i = 0, l = $children.length; i < l; i += 4) {
                $children.slice(i, i+4).wrapAll('<div class="wrapList"></div>');
            }
        }
};

Wrap();

.row {
  background-color: silver;
  border: 3px solid red;
}

.wrapList {
  border: 1px solid black;
  margin: 3px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="wrap4">1</div>
    <div class="wrap4">2</div>
    <div class="wrap4">3</div>
</div>
<div class="row">
  <div class="wrap4">4</div>
  <div class="wrap4">5</div>
  <div class="wrap4">6</div>
  <div class="wrap4">7</div>
  <div class="wrap4">8</div>
</div>