jquery - 使用 jQuery 将连续的列表项包装在不同的组中

Question

我有一个由 CMS 导出的无序列表，需要识别<li>具有 .sub 类的元素并将它们包装在 .sub 中<ul>。

我已经尝试过这种wrapAll()方法，但是它找到了所有<li class="sub">元素并将它们包装在一个<ul>. 我需要它来维护单独的分组。

导出的代码如下：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li class="sub"></li>
  <li class="sub"></li>
  <li class="sub"></li>
  <li></li>
  <li></li>
  <li class="sub"></li>
  <li class="sub"></li>
  <li class="sub"></li>
  <li></li>
 </ul>

我需要它是：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <ul>
     <li class="sub"></li>
     <li class="sub"></li>
     <li class="sub"></li>
  </ul>
  <li></li>
  <li></li>
  <li></li>
  <ul>
     <li class="sub"></li>
     <li class="sub"></li>
     <li class="sub"></li>
   </ul>
   <li></li>
   <li></li>
</ul>

任何帮助将不胜感激。

Answer 1

1. 用于.each遍历所有.sub元素。
2. 忽略其父级具有 class 的元素wrapped，使用hasClass()
3. 用于nextUntil(:not(.sub))选择所有连续的子元素（使用 包括自身.andSelf()）。
   给定的第一个参数意味着：当元素不匹配时停止向前看.sub。
4. wrapAll

演示：http: //jsfiddle.net/8MVKu/

为了完整起见，我将<li>元素集包裹在其中<li><ul>...</ul></li>而不是普通的<ul>.

代码：

$('.sub').each(function() {
   if ($(this.parentNode).hasClass('wrapped')) return;
   $(this).nextUntil(':not(.sub)').andSelf().wrapAll('<li><ul class="wrapped">');
});
$('ul.wrapped').removeClass('wrapped'); // Remove temporary dummy

Answer 2

我想扩展 Rob W 已经很棒的解决方案，提供一种消除临时包装类的方法：

$(document).ready(function() {
    $('li.sub').filter(':not(li.sub + li.sub)').each(function() {
        $(this).nextUntil(':not(li.sub)').andSelf().wrapAll('<li><ul>');
    });
});

http://jsfiddle.net/m8yW3/

编辑：甚至不需要过滤器：

$('li.sub:not(li.sub + li.sub)').each(function() {
    $(this).nextUntil(':not(li.sub)').andSelf().wrapAll('<li><ul>');
});

Answer 3

我相信你应该拥有的是这个 jQuery：

$('li.sub').wrap('<li><ul>');

这将正确地将您的<li>元素包装在新<ul>标签中，同时将它们包装在<li>标签中。您的示例的输出将是：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li><ul><li class="sub"></li></ul></li>
  <li><ul><li class="sub"></li></ul></li>
  <li><ul><li class="sub"></li></ul></li>
  <li></li>
  <li></li>
  <li><ul><li class="sub"></li></ul></li>
  <li><ul><li class="sub"></li></ul></li>
  <li><ul><li class="sub"></li></ul></li>
  <li></li>
 </ul>