0

将一定数量的 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">');
  }
});
4

1 回答 1

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：您需要使代码适应您的示例。您不能简单地复制粘贴到您的代码中并期望它能够工作。我直接附加到你不需要的身体上。这只是一个例子。

这是我认为您要实现的目标的示例。

于 2020-04-03T05:58:36.710 回答