jquery:分组类似项

有一种可能性:

例子: 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 元素到组中的第一个元素 (至少有一个 利福 之后,之前没有) .

然后与 .each() 它补充了 <a> ,get是下一个元素,直到它到达非 利福 ,用 <ul> 并返回有多少人在使用 length 财产。

然后我们转到那个新的 <UL & GT; 把它附加到第一个 利福 在小组中。

最后,我们把储存在 长度 属性到 <A & GT; 元素。

我想到这个:

$(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);
        });

    }

});