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元素缩小到组中的第一个（至少有一个{{} 1}}之后，没有之前）。

然后使用li.foo附加.each()，获取下一个元素，直到它到达不是<a>的元素，包裹li.foo的元素并返回多少元素有使用<ul>属性。

然后我们遍历到新的length并将其附加到群组中的第一个<ul>。

最后，我们将li.foo属性中存储的数量添加到length元素。

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_name] == 'undefined') {
                groups[class_name] = [];
            }
            groups[class_name].push(self);
        }
    });
    var ul = $('ul');
    ul.empty();
    for (var 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);
        });
    }
});

jQuery：对类似项进行分组

2 个答案: