如何将一定数量的 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：您需要根据您的示例调整代码。您不能简单地复制粘贴到您的代码中并期望它能够工作。我直接附加到你不需要的身体上。这只是一个例子。

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