如何将一定数量的div包裹在另一个div中？

Question

将一定数量的 div 包裹到另一个 div 中的最佳方法是什么？例如，如果我有 19 个 div，我如何使用 wrapAll 将其中的 9 个分组，并且即使小于 9 个仍然分组。

这就是我现在拥有的。如果它是 4，它可以工作，但是当我尝试做更多时，它会复制其他元素的内容。

$(".emails .multi-items").each(function (i) {
 var line_wrap = $(".line_wrap");
 for(var i=-1; i<line_wrap.length; i=i+5) {
  $('.line_wrap:eq('+i+'),.line_wrap:eq('+(i-1)+'),.line_wrap:eq('+(i-2)+'),.line_wrap:eq('+(i-3)+'),.line_wrap:eq('+(i-4)+')').wrapAll('<div class="wrap">');
  }
});

Answer 1

这是一个简单的例子：

var size = 10; //define how many elements you want in each wrapper
var items = $('.item'); //the collection of all your items
var container; //this will be used to add the items in it.

$.each(items, function(i, item) { 
  //this expression checks if we need to create a new container
  if (i % size === 0) {
    container = $('<div class="wrapped"></div>'); //create a new container
    $('body').append(container); //add the new container to the body
  }
  $(item).appendTo(container); //add the item to the container
});

.wrapped {
  border: 1px solid #ff0000;
  margin-bottom: 20px;
  padding: 20px;
}

.item {
  border: 1px solid #000000;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>

---- 根据您的评论进行编辑

在运行宁我的代码之前，这就是你得到的

你可以把.message-contain的内容包裹起来

如果你想运行我的代码每个 .message-contain PS：你有多个id="content"。 ID 必须是唯一的。如果您保留相同的 ID，您将运行遇到问题。

PS2：您需要根据您的示例调整代码。您不能简单地将 copy-paste 添加到您的代码中并期望它能正常工作。我直接附加到 body，这不是您需要的。这只是一个例子。

Here's an example of what I think you're trying to achieve.

如何将一定数量的div包裹在另一个div中？

How to wrap a certain number of divs in another div?

jquery

wrapall