如何同时遍历三个div框

Question

我有一个用div标签包裹的12条帖子的列表，结构看起来像这样：

<div class="row">
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
</div>

是否可以通过其他div标签中的内容类别使每三个div循环？

最后，我将具有如下结构：

<div class="row">
    <div class="wrapper">
        <div class="content">
        </div>
        <div class="content">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
        </div>
        <div class="content">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
        </div>
        <div class="content">
        </div>
        <div class="content">
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
        </div>
        <div class="content">
        </div>
        <div class="content">
        </div>
    </div>
</div>

是否可以通过其他div标签中的内容类别使每三个div循环？

Answer 1

您可以这样做

// get all element at position 1,4,7,...etc and iterate
$('.row .content:nth-child(3n + 1)').each(function() {
   $(this)
        // get all siblings next to it
        .nextAll('.content')
        // get only next 2 elements from it
        .slice(0, 2)
        // combine the current element with it
        .add(this)
         // wrap all elemnts with the div(3 divs)
        .wrapAll('<div class="wrapper">')
})

$('.row .content:nth-child(3n + 1)').each(function() {
  $(this).nextAll('.content').slice(0, 2).add(this).wrapAll('<div class="wrapper">')
})

console.log($('.row')[0].outerHTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

---

或者您可以使用jQuery :lt()伪类选择器来避免使用slice()方法。

$('.row .content:nth-child(3n + 1)').each(function() {
  $(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})

$('.row .content:nth-child(3n + 1)').each(function() {
  $(this).nextAll('.content:lt(2)').add(this).wrapAll('<div class="wrapper">')
})

console.log($('.row')[0].outerHTML)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

Answer 2

遍历子级，每第三个子级创建一个新的包装，并将每个子级添加到各自的包装中。

var test = document.querySelector("#test");
var index = 2;
for (var child of test.querySelectorAll(".content")) {
  if (index++ >= 2) {
    var newWrapper = test.appendChild(document.createElement("div"));
    newWrapper.className = "wrapper";
    index = 0;
  }
  test.removeChild(child);
  newWrapper.appendChild(child);
}
console.log(test.innerHTML);

<div class="row" id="test">
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
  <div class="content">
  </div>
</div>

Answer 3

尝试

function WrapUpAllDivs(){
      var CurrentDivs = $(".row",".content");
        for(var i = 0; i < CurrentDivs.length -1 ; i+=3) {
          CurrentDivs
           .slice(i, i+3)
           .wrapAll("<div class=\"wrapper\"></div>"); 
    }
}