Использование Jquery завернуть динамического содержимого с помощью HTML-теги

Question

У меня есть страница, которая возвращает динамический список элементов

<ul> 
<li>item1</li> 
<li>item2</li> 
<li>item3</li> 
<li>item4</li> 
<li>item5</li> 
<li>item6</li> 
</ul> 

Мне нужен способ, чтобы вставить теги вокруг каждой группировки 3 элементов списка. В основном преобразовать код, указанный выше в этом

<ul> 
<div> 
    <li>item1</li> 
    <li>item2</li> 
    <li>item3</li> 
</div> 
<div> 
    <li>item4</li> 
    <li>item5</li> 
    <li>item6</li> 
</div> 
</ul> 

Я играл вокруг с Jquery Wrap(), WrapAll(), WrapInner() ... но без успеха до сих пор. Очень ценю любые решения или идеи по этому поводу.

Answer 1

Вот еще один метод, который генерирует HTML динамически и следует правильную семантику, позволяя только <li> элементы непосредственно внутри <ul> элементов:.

$(function(){ 
    const GROUP_COUNT = 3; 
    var liElements = $('ul > li'); 
    var count = liElements.length; 
    var html = ''; 

    for (var i = 0; i < count; i += GROUP_COUNT) { 
     html += '<li><ul>'; 
     liElements.slice(i, i + GROUP_COUNT).each(function(){ 
      html += '<li>' + $(this).html() + '</li>'; 
     }); 
     html += '</ul></li>'; 
    } 

    $('ul').html(html); 
}); 

Вы можете изменить GROUP_COUNT, чтобы сгруппировать по различным группам элементов.

Этот код превратит:

<ul> 
    <li>item1</li> 
    <li>item2</li> 
    <li>item3</li> 
    <li>item4</li> 
    <li>item5</li> 
    <li>item6</li> 
    <li>item7</li> 
</ul> 

В:

<ul> 
    <li> 
    <ul> 
     <li>item1</li> 
     <li>item2</li> 
     <li>item3</li> 
    </ul> 
    </li> 
    <li> 
    <ul> 
     <li>item4</li> 
     <li>item5</li> 
     <li>item6</li> 
    </ul> 
    </li> 
    <li> 
    <ul> 
     <li>item7</li> 
    </ul> 
    </li> 
</ul> 

Answer 2

Это решение предназначено для комментариев, чтобы вставить новую ul вместо div.

JQuery:

var numbGroups = ($('ul li').length - 3)/3; 
for(var index = 0; index < numbGroups ; index++) { 
$('#ul'+index).after("<ul id='ul"+(index+1)+"'></ul>"); 
$('#ul' + (index+1)).append($('ul#ul0 li:gt(2):lt(3)')); 
} 

Вставка Id в ул

<ul id='ul0'> 
<li>item1</li> 
<li>item2</li> 
<li>item3</li> 
<li>item4</li> 
<li>item5</li> 
<li>item6</li> 
<li>item7</li> 
<li>item8</li> 
</ul> 

EDIT: Старое решение было неправильным для длинных списков. Исправлено это.

Answer 3

Как об этом:.

var originalList = $("ul"); 
var listsToAdd = originalList.children("li").length/3 - 1; 
for(var index = 0; index < listsToAdd; index++) 
{ 
    originalList.before("<ul></ul>"); 
} 
while (originalList.children("li").length > 3) 
{ 
    originalList.children("li:lt(3)").appendTo("ul:empty:first"); 
} 

Он работал в моих тестах с большими списками и не идентификатор не должен быть добавлен (предполагается, что существует только один список, чтобы начать В противном случае, просто установите originalList в список, чтобы разделен)

Answer 4

Я бы, как предложил ранее, совет не включать некоторые элементы внутри DIV ул. В любом случае, вот мое предложение:

for(var i = 2; i < $('ul li').length - 1; i += 3) 
{ $('ul li').eq(i).after('</div><div>'); } 
$('ul').wrapInner('<div></div>');