使用 jQuery 在每 5 个 <li> 之后添加 </ul><ul>答案

【问题标题】：Adding </ul><ul> after every 5th <li> with jQuery使用 jQuery 在每 5 个 <li> 之后添加 </ul><ul>
【发布时间】：2011-12-25 10:38:04
【问题描述】：

我有一个列表，我需要在每 5 li 之后添加</ul><ul class="list">，所以列表看起来像这样

    <ul>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a> </li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
</ul>

结局是这样的

<ul>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a> </li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
</ul>
<ul class="list">
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
</ul>
<ul class="list">
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
  <li><a>Test Page</a></li>
</ul>

我当前的 jQuery 不工作，因为它正在切换 ul 的顺序

var ulVal = jQuery('</ul><ul class="links">');
jQuery('ul.col1 li:nth-child(5n)').after(ulVal)

我做错了什么？

【问题讨论】：

切换UL的顺序是什么意思？
我的意思是按此顺序添加 ul <ul class="list"></ul> 而不是我想要的方式 </ul><ul class="list">
@Ashlee 仅供参考，jQuery 实际上并没有切换您传递它的开始和结束标签的顺序。相反，您是creating a new element with jQuery。试一试 - 从该语句中删除结束，您会注意到您仍然会得到完全相同的行为。

标签： jquery list css-selectors

【解决方案1】：

文档的当前状态由浏览器维护为代表嵌套元素和文本节点的 DOM 对象树。它不作为一些 HTML 标记源维护，您可以对其进行任意编辑，即使 after() 让您认为这就是它正在做的事情。

所以：

jQuery('</ul><ul class="links">');

这行不通。 jQuery(markup) 只能从格式良好的元素创建 DOM 节点，从开始标记开始，并在必要时包括内容和结束标记。它不能创建代表不同元素的结束标记和开始标记的对象。

不要尝试使用 HTML 源代码，而是在 DOM 中移动现有元素节点。

var items= ul.children();
for (var i= 0; i<items.length-5; i+= 5)
    items.slice(i, i+5).appendTo( $('<ul class="list">').insertBefore(ul) );

【讨论】：

暗示您将首先通过您使用的任何方式选择您的原始<ul> 元素，例如var ul= $('#mylist');。如果您有多个要独立拆分的列表块，请将$('.mylist').each(function(){ ... }); 放在它周围并使用this 表示ul。

【解决方案2】：

这里提出了类似的问题：jQuery split long ul list in smaller lists

我修改了答案来做你想要的：

$(function(){
  var $bigList = $('.col1'), group;
  while((group = $bigList.find('li:lt(5)').remove()).length){
    $('<ul class="links" />').append(group).appendTo('body');
  }
});

根据您使用它的准确程度，您可能希望将 appendTo 值更改为原始列表的位置，然后删除该现在为空的列表。当然，您也可以调整它以将列号（如您的 col1）添加到每个组等。

【讨论】：