javascript - 将每两个 div 包裹在每个父 div 中的一个 div 中

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，我需要将最后一个子 div 包装在名为“grid”的 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>");

    }
  });