jQuery переносит код после x число элементов
У меня есть УЛ., которые содержат любое количество ЛИТИЕВ. Я пытаюсь создать некоторый код jQuery, который проанализирует исходную УЛ. и перенесет УЛ. и другой LI после каждых 5 из исходных ЛИТИЕВ.
Стартовый HTML:
<ul id="original_ul">
<li class="original_li">..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
Необходимый HTML:
<ul id="processed_ul">
<li class="new_wrap_li">
<ul class="new_wrap_ul">
<li class="original_li">..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul><!-- end new wrap ul -->
</li><!-- end new wrap li -->
<li class="new_wrap_li">
<ul class="new_wrap_ul">
<li class="original_li">..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul><!-- end new wrap ul -->
</li><!-- end new wrap li -->
</ul><!-- end processed ul -->
Я использовал функцию .each для прохождения через ЛИТИЕВ, и добавлять их к новой обработанной ул., сохраненной во временном отделении... теперь, я просто должен перенести новый LI и УЛ. вокруг каждых 5 ЛИТИЕВ.
Заранее спасибо!!
Al
4 ответа
Можно сделать так:
var lis = $("#original_ul li");
for(var i = 0; i < lis.length; i+=5) {
lis.slice(i, i+5)
.wrapAll("<li class='new_wrap_li'><ul class='new_wrap_ul'></ul></li>");
}
Это сохраняет их в том же элементе #original_ul, но вы можете просто изменить ID, если это необходимо. Этот подход генерирует точный вывод html, который вы указали в вопросе, за исключением ID в верхней части
jQuery('ul#original_ul').attr('id', 'processed_ul')
.find('li:nth-child(5n)').each(function() {
$(this).prevAll('li').andSelf()
.wrapAll('<li class="new_wrap_li"><ul class="new_wrap_ul"></ul></li>');
});
Вы можете использовать цикл.
Например:
while($('ul#original li').length) {
var newContainer = $('<li class="new_wrap_li"><ul class="new_wrap_ul" /></li>')
.appendTo('#processed_ul');
$('ul#original li:lt(4)').detach().appendTo(newContainer.children('ul'));
}
Что-то вроде этого сделает это:
$('#original_ul').find('li:nth-child(5n)').each(function(){
$(this).prevAll('li').andSelf()
.wrapAll('<ul class="new_wrap_ul"></ul>');
}).end().find('ul').wrap('<li class="new_wrap_li"></li>')
.find('li:first-child').addClass('original_li');