Как обернуть определенное количество div в другой div? - PullRequest
Новая
       37

Как обернуть определенное количество div в другой div?

0 голосов
/ 03 апреля 2020

Как лучше всего поместить определенное количество элементов в другой элемент? Например, если у меня 19 делений, как я могу использовать 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">');
  }
});

1 Ответ

1 голос
/ 03 апреля 2020

Вот простой пример: 

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>

---- РЕДАКТИРОВКА ПОСЛЕ ВАШЕГО КОММЕНТАРИИ

Перед запуском моего кода вот что вы получаете

enter image description here

Вы можете просто обернуть содержимое .message-contain

Если вы хотите запустить мой код для каждого .message-contain PS: у вас есть несколько ID = "содержание". Идентификаторы должны быть уникальными. У вас возникнут проблемы, если вы сохраните тот же идентификатор.

PS2: вам нужно адаптировать код к вашему примеру. Вы не можете просто скопировать и вставить в свой код и ожидать, что он будет работать. Я добавляю прямо к телу, которое не то, что вам нужно. Это был просто пример.

Вот пример того, чего, я думаю, вы пытаетесь достичь.

...