Question

我使用下面的代码用类.wrapList

在div中包含类.wrap4的每4个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 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

您可以遍历行，仅对每行的子项执行换行：

＆＃13;

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();

＆＃13;

.row {
  background-color: silver;
  border: 3px solid red;
}

.wrapList {
  border: 1px solid black;
  margin: 3px 0;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以选择每一行，然后遍历每一行并查找wrap4类并使用wrapAll()。

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

<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>

包裹每4个div - 错误的行为

2 个答案: