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>

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