jquery - 如何使用 JQuery 在某个项目之后将 一分为二？

Question

我需要用 JQuery 将一个列表分成两部分。假设我有以下列表:

<ul>
  <li>item</li>
  <li>item</li>
  <li id="POI">item</li>
  <li>item</li>
  <li>item</li>
</ul>

我试过使用:

$("li#POI").after("</ul><ul>");

但 JQuery 似乎认为我正在创建格式错误的 HTML，并且没有插入结束标记。相反，它给了我这个输出:

<ul>
  <li>item</li>
  <li>item</li>
  <li id="POI">item</li>
  <ul></ul>
  <li>item</li>
  <li>item</li>
</ul>

请提供一种可以帮助我使用 JQuery 获得以下输出的方法:

<ul>
  <li>item</li>
  <li>item</li>
  <li id="POI">item</li>
</ul>
<ul>
  <li>item</li>
  <li>item</li>
</ul>

非常感谢。

Answer 1

var splitPoint = $('#POI');
var list = splitPoint.parent();

$('<ul>').append(splitPoint.nextAll()).insertAfter(list);

如果您的列表可以通过 id 或其他选择器来识别，那么这可以简化为:

$('<ul>').append($('#POI ~ li')).insertAfter('#listID');