Question

这是我的HTML：

<div class="parent">
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
</div>
<div class="parent">
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
</div>
<div class="parent">
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
    <div class="col-1-2"></div>
</div>

每个父母可以更改子div的数量。有些可能有偶数个子div，有些可能有奇数。

我需要用名为“grid”的div包装每两个子div。如果有一个奇数个子div，我需要在名为“grid”的div中包装最后一个子div。例如：

<div class="parent">
    <div class="grid">
        <div class="col-1-2"></div>
        <div class="col-1-2"></div>
    </div>
    <div class="grid">
        <div class="col-1-2"></div>
        <div class="col-1-2"></div>
    </div>
    <div class="grid">
        <div class="col-1-2"></div>
        <div class="col-1-2"></div>
    </div>
    <div class="grid">
        <div class="col-1-2"></div>
    </div>
</div>

这是我的jQuery：

    var divs = $(".parent > .col-1-2");
    for(var i = 0; i < divs.length; i+=2) {
        divs.slice(i, i+2).wrapAll("<div class='grid'></div>");
    }

这适用于它包装每两个子div但它不包含在每个父div中。如果父div有五个子div，则下一个父节点的第一个子div将被拉入前一个父节点。

Answer 1

试试这个

  $(".parent").each(function(){
    var divs =  $(this).find('.col-1-2');
    for(var i = 0; i < divs.length; i+=2) {

    divs.slice(i, i+2).wrapAll("<div class='grid'></div>");

    }
  });

将每个父div中的div中的每两个div换行

1 个答案: