在div容器中包装<li>项的范围

时间:2016-03-15 14:56:05

标签: jquery html css

假设我有以下DOM树:

<div id="parent-container">
 <ul>
  <li>item-1</li>
  <li>item-2</li>
  <li>item-3</li>
  <li>item-4</li>
  <li>item-5</li>
  ...
 </ul>
</div>

如何将项目3中的所有项目包装到div或另一个ul中的n个项目或我可用于在容器上施加垂直滚动条的任何元素第3项开始。

期望的输出应该是:

<div id="parent-container">
 <ul>
  <li>item-1</li>
  <li>item-2</li>
  <div id="child-container">
   <li>item-3</li>
   <li>item-4</li>
   <li>item-5</li>
   ...
   </div>
 </ul>
</div>

我尝试了以下操作但没有运气:

$('#parent-container ul *:nth-child(n+3)').wrapInner('<div class="child-container"></div>');

2 个答案:

答案 0 :(得分:1)

除了它的下行答案:如果你需要将一系列元素包装到指定的n,你可以使用slice():

var i = 2;
var n = 4;
$("#parent-container ul li").slice(i, n).wrapAll("<div class='child-container'></div>");

Codepen

答案 1 :(得分:1)

使用jQuery :gt() selector然后.wrapAll() method.

$('#parent-container li:gt(3)').wrapAll('<div id="child-container"></div>'))

请参阅documentation