jquery - 使用 jQuery 在每 5 个 之后添加

Question

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

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