javascript - 如何包装具有相同类但位置不同的所有元素

Question

我的 Javascript 有问题，我的 HTML 列表有五个条目，带有 .item类，我想要它 wrapAll来自 ul元素但是，当我使用 wrapAll 时jQuery 的方法，所以它包装了所有 .item一个元素 ul ，我希望它是一个不同的 ul由其他分隔 li类似下面代码的元素:

<ul>
   <li>Item 1</li>
   <li class='item'>Item 2</li>
   <li class='item'>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li class='item'>Item 6</li>
   <li class='item'>Item 7</li>
   <li class='item'>Item 8</li>
   <li>Item 9</li>
   <li>Item 10</li>
</ul>

我要 wrapAll .item像这样的类:

<ul>
   <li>Item 1</li>
   <ul class='wrap'>
      <li class='item'>Item 2</li>
      <li class='item'>Item 3</li>
   </ul>
   <li>Item 4</li>
   <li>Item 5</li>
   <ul class='wrap'>
      <li class='item'>Item 6</li>
      <li class='item'>Item 7</li>
      <li class='item'>Item 8</li>
   </ul>
   <li>Item 9</li>
   <li>Item 10</li>
</ul>

我试过这个:

$('.item').wrapAll($('<ul/>',{class:'wrap'}));

但它是这样的:

<ul>
   <li>Item 1</li>
   <ul class='wrap'>
      <li class='item'>Item 2</li>
      <li class='item'>Item 3</li>
      <li class='item'>Item 6</li>
      <li class='item'>Item 7</li>
      <li class='item'>Item 8</li>
   </ul>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 9</li>
   <li>Item 10</li>
</ul>

谢谢阅读。

Answer 1

一种想法可能是全选 li没有 item 的元素具有相邻 li 的类带有 .item 的项目类(class)。这基本上会给你所有 li一组项目开头的元素。然后您可以使用 .nextUntil(':not(.item)') 在每个起始 li 上获取每个 li第一个 .item 之后的元素其中有 .item类(class)。这将为您提供除原始起始元素之外的所有元素，因此您需要使用 .addBack() 将初始起始元素添加到集合中。然后你可以使用 wrapAll() 包装它:

$('li:not(.item) + li.item').each(function() {
  $(this).nextUntil(':not(.item)').addBack().wrapAll($('<ul/>',{class:'wrap'}));
});

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