在x个元素之后的jQuery包装代码

我有一个包含任意数量LI的UL。 我正在尝试创建一些jQuery代码，它将解析原始UL并在每5个原始LI之后包装UL和另一个LI。

开始HTML：

 
..
 
..
 
..
 
..
 
..
 
..
 
..
 
..
 
..
 
..
  

必填HTML：

 
 
 
 
..
 
..
 
..
 
..
 
..
 
 
 
 
 
..
 
..
 
..
 
..
 
..
 
 
 
 

我一直在使用.each函数来浏览LI并将它们附加到临时div中保存的新处理的ul …现在我只需要在每5个LI周围包装新的LI和UL。

提前致谢！！

人

Answer 1

你可以这样做：

 var lis = $("#original_ul li"); for(var i = 0; i < lis.length; i+=5) { lis.slice(i, i+5) .wrapAll("
"); } 

这使它们保持在相同的#original_ul元素中，但如果需要，您可以更改ID。 除了顶部的ID

之外，这种方法生成了问题中的确切输出html

Answer 2

 jQuery('ul#original_ul').attr('id', 'processed_ul') .find('li:nth-child(5n)').each(function() { $(this).prevAll('li').andSelf() .wrapAll('
'); }); 

Answer 3

你可以使用循环。

例如:(未经测试）

 while($('ul#original li').length) { var newContainer = $('
') .appendTo('#processed_ul'); $('ul#original li:lt(4)').detach().appendTo(newContainer.children('ul')); } 

Answer 4

像这样的东西会这样做：

 $('#original_ul').find('li:nth-child(5n)').each(function(){ $(this).prevAll('li').andSelf() .wrapAll('
'); }).end().find('ul').wrap('
') .find('li:first-child').addClass('original_li');