Question

我有一个列表，我需要在每第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)

我做错了什么？

Answer 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) );

Answer 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）等。

使用jQuery </li>每隔5次<li>添加<ul> </ul>

2 个答案: