Вот еще один метод, который генерирует 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>