javascript - 将父级添加到多个标签

Question

所以我有这样的代码：

<ul>
 <li class='item-1'>...</li>
 <li class='item-2'>...</li>
 <li class='item-3'>...</li>
 <li class='item-4'>...</li>
 <li class='item-5'>...</li>
</ul>

我想使用 JS 或 jQuery 将类包装.item-2, .item-3, .item-4成一个父类.container，所以代码变成这样：

<ul>
 <li class='item-1'>...</li>
 <div class='container'>
  <li class='item-2'>...</li>
  <li class='item-3'>...</li>
  <li class='item-4'>...</li>
 </div>
 <li class='item-5'>...</li>
</ul>

怎么做？到目前为止我已经尝试过：

$(".item-2").before("<div class='container'>");
$(".item-4").after("</div>");

但结果是：

<ul>
 <li class='item-1'>...</li>
 <div class='container'></div>
 <li class='item-2'>...</li>
 <li class='item-3'>...</li>
 <li class='item-4'>...</li>
 <li class='item-5'>...</li>
</ul>

标签： javascripthtmljquery

Answer 1

$('ul li:gt(0):lt(3)').wrapAll('<div class="container"></div>');

.container {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class='item-1'>1</li>
  <li class='item-2'>2</li>
  <li class='item-3'>3</li>
  <li class='item-4'>4</li>
  <li class='item-5'>5</li>
</ul>

您可以使用:gt和:lt选择器.wrapAll()

$('ul li:gt(0):lt(3)').wrapAll('<div class="container"></div>');