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

【问题标题】：Loop over items und wrap items into div container using jquery each function使用jquery每个函数循环项目并将项目包装到div容器中
【发布时间】：2021-02-21 10:09:54
【问题描述】：

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

【问题讨论】：

你用
做什么？你是说
吗？

标签： javascript loops each

【解决方案1】：

我为你写一个解决方案：

$('.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/

【讨论】：

【解决方案2】：

您可以这样做的另一种方法是在您的each 中也使用wrapAll。

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>

【讨论】：

【解决方案3】：

如果您喜欢更长但更易于理解的解决方案，您可以这样做。

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

【讨论】：

非常感谢！很有帮助！
@Milenoi，我很高兴知道它很有用。你可以投票帮助其他人吗？谢了！
很遗憾，我无法做到这一点 - 我收到以下消息：“感谢您的反馈！声望低于 15 人的投票将被记录，但不要更改公开显示的帖子得分。”很抱歉；（