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

Question

我有一个由CMS导出的无序列表,需要识别<li>具有类.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. 忽略其母公司拥有一流的元素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>');
});