Javascript 每4个div包装一次-错误行为

我使用下面的代码将class.wrap4的每4个div封装在class.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>

函数换行（）{
变量$children=$（'.wrap4'）；
对于（变量i=0，l=$children.length；i

例如：

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>

1.
2.
3.
4.
5.
6.
7.

结果：

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>

1.
2.
3.
4.
5.
6.
7.

效果很好，但是如果包装前的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>

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

1.
2.
3.
4.
5.
6.
7.

结果将不考虑行，它将把4移到顶行以完成一行4个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>

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

1.
2.
3.
4（该div属于下一行）
5.
6.
7.

如何使代码尊重行

---

非常感谢

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

函数换行（）{
变量$rows=$（'.row'）；
for（var h=0，r；r=$rows[h]；h++）{
var$children=$（r）.find（'.wrap4'）；
对于（变量i=0，l=$children.length；i
.row{
背景颜色：银色；
边框：3倍纯红；
}
wrapList先生{
边框：1px纯黑；
保证金：3px0；
}

1.
2.
3.
4.
5.
6.
7.
8.
您可以选择每一行，然后遍历每一行，查找
wrap4
类并使用
wrapAll（）


函数换行（）{
$（'.row'）。每个（函数（）{
var$children=$（this.find（'.wrap4'）；
对于（变量i=0，l=$children.length；i

1.
2.
3.
4.
5.
6.
7.
可能使用
。unwrap（）
是解决方案。首先把它们全部拆开，然后根据你的需要把它们包起来。问题出在拆开包装后！它有点像js函数。改为使用小写函数名（只是它的意见）只是从问题中复制/粘贴它。我同意通常情况下，函数名应该以小写开头。我有一个错误：uncaughtreferenceerror:r不是defined@ysanmiguel上面的代码中没有
r
，请检查是否遗漏了
$
这很奇怪：$r.find不是Jquery正在运行的函数，有什么想法吗？只要意识到这个解决方案会产生多个，所以它是不可行的。我不确定你所说的创建多个``是什么意思？解决方案是将div包装在
wrapList
类中。