jQuery：分组相似的项目

Question

使用jQuery，我试图在列表中分组相似的项目。这是我想要做的。鉴于类似下面的列表：

<ul> 
    <li class="foo">Item #1</li> 
    <li class="foo">Item #2</li> 
    <li class="foo">Item #3</li> 
    <li class="bar">Item #4</li> 
    <li class="bar">Item #5</li> 
    <li class="foo">Item #6</li> 
    <li class="foo">Item #7</li> 
    <li class="bar">Item #8</li> 
</ul> 

我想有以下落得：

<ul> 
    <li class="foo">Item #1 <a>2 More Like This</a> 
     <ul> 
      <li class="foo">Item #2</li> 
      <li class="foo">Item #3</li> 
     </ul> 
    </li> 
    <li class="bar">Item #4</li> 
    <li class="bar">Item #5</li> 
    <li class="foo">Item #6 <a>1 More Like This</a> 
     <ul> 
      <li class="foo">Item #7</li> 
     </ul> 
    </li> 
    <li class="bar">Item #8</li> 
</ul> 

总之，随时有2级或更多的物品带class =“foo”的，他们应该被分组到一起，直到达到一个非class =“foo”项目。然后，我可以使用链接显示或隐藏分组项目。

Answer 1

这里有一个可能性：

例子：http://jsbin.com/ipiki3/3/

$('ul > li.foo') 
    .filter(function() { 
     var $th = $(this); 
     return $th.next('li.foo').length && !$th.prev('li.foo').length; 
    }) 
    .each(function() { 
     var $th = $(this); 
     var len= $th.append('<a href="#"> more like this</a>') 
        .nextUntil(':not(li.foo)').wrapAll('<ul>').length; 
     $th.next('ul').appendTo(this); 
     $th.children('a').prepend(len); 
    }); 

编辑：修正了len变量一个错误，增加了一个例子。

---

说明：什么是与.filter()发生的事情是，它是缩小li.foo元素到第一批中（至少有一个li.foo后，并没有之前）。

然后与.each()它追加<a>，得到直到它到达一个不是li.foo的下一个元素，包装那些具有<ul>，并返回使用length财产多少有。

然后我们遍历新的<ul>并将它附加到组中的第一个li.foo。

最后，我们将我们在length属性中存储的数量预先存储到<a>元素。

Answer 2

我想出了这一点：

$(document).ready(function() { 
    var groups = {} 
    $('ul li').each(function() { 
     var self = $(this); 
     var class_name = self.attr('class'); 
     if (class_name) { 
      if (typeof groups[class] == 'undefined') { 
       groups[class_name] = []; 
      } 
      groups[class_name].push(self); 
     } 
    }); 
    var ul = $('ul'); 
    ul.empty(); 
    for (class_name in groups) { 
     var array = groups[class_name]; 
     ul.append('<li class="' + class_name + '">' + $(array[0]).html() + 
      '<a>More Like this</a><ul></ul>'); 
     $(array.splice(1)).each(function() { 
      ul.find('li.' + class_name + ' ul').append(this); 
     }); 

    } 

});