javascript - 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属性(property)。

然后我们遍历到那个新的<ul>并将其附加到第一个 li.foo在群里。

最后，我们将存储在 length 中的数量添加到前面属性(property)给<a>元素。