使用jquery每个函数将项目循环并包装项目到div容器中

如何解决使用jquery每个函数将项目循环并包装项目到div容器中

我的HTML

<div class="loop">
<article>1<article>
<article>2<article>
<article>3<article>
<article>4<article>
<article>5<article>
<article>6<article>
</div>

我的JS：

 $('.loop').find('article').each(function (index,section) {
            if ( index < 3) {
                      
                // code here 

        }
   })

我不知道如何解决这个问题：

我想遍历这些项目并用div包装项目1,2,3。还有项目4,5,6和7,8,9（如果还有更多项目）

我想要的HTML是：

<div class="loop">
<div="newContainer">
    <article>1<article>
    <article>2<article>
    <article>3<article>
</div>
<div="newContainer">
    <article>4<article>
    <article>5<article>
    <article>6<article>
</div>
</div>

解决方法

我为您写一个解决方案：

$('.loop').find('article').each(function (index,section) {
    if(index % 3 ===0)
     {
       $('.loop').append($('<div>'));
     }
     $('.loop').children(`div:nth-of-type(${Math.floor(index/3)+1})`).first().append(section);
})

这是一个完整的示例： https://jsfiddle.net/t40ujrbs/

您可以执行此操作的另一种方法是在wrapAll内部使用each。

var article = $('article');

$.each(article,function (index,section) {
  if (index % 3 === 0) {
    $(article).slice(index,index + 3).wrapAll("<div class='new-div'>Test text</div>");
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loop">
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
</div>

如果您希望使用更长但更简单的解决方案，则可以这样做。

$(document).ready(()=>{
  let newDiv = $("<div>");
  let generalId=1,ctrl=3;
  let dv = $("<div>");
  dv.attr("id","new-container"+generalId);
  let oldDiv=$(".loop");

  oldDiv.find("article").each(function (index,article) {
    ctrl--;
    dv.append(article);

    if(ctrl==0) {// if ctrl==0,we will append to new main div
      newDiv.append(dv);
      generalId++;
      dv = $("<div>");
      dv.attr("id","new-container"+generalId);
      ctrl=3;
    }
  });
  if(ctrl>0) newDiv.append(dv);
  oldDiv.html(newDiv.html());
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
</head>
<body>
  <div class="loop">
    <article>1</article>
    <article>2</article>
    <article>3</article>
    <article>4</article>
    <article>5</article>
    <article>6</article>
    <article>7</article>
  </div>
</body>
</html>