Javascript jQuery：对相似项进行分组

使用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>

第1项
第2项
第3项
第4项
第5项
第6项
第7项
第8项

最后，我想说以下几点：

<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>

项目#1 2更像这样

第2项
第3项


第4项
第5项
项目#6 1更像这样

第7项


第8项

简言之，只要有2个或多个class=“foo”项，就应该将它们组合在一起，直到到达一个非class=“foo”项。然后，我可以使用链接显示或隐藏分组的项目。

我想到了以下方法：

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

$（文档）.ready（函数（）{
变量组={}
$（'ul li'）。每个（函数（）{
var self=$（这是）；
var class_name=self.attr（'class'）；
if（类名）{
if（组的类型[类名称]==“未定义”）{
组[类名称]=[]；
}
组[类名称]。推送（自身）；
}
});
var ul=$（'ul'）；
ul.empty（）；
for（组中的变量类名称）{
变量数组=组[类名称]；
ul.append（“
“++$（数组[0]）.html（）+
“更像是这样”）；
$（array.splice（1））.each（function（）{
ul.find（'li.'+class_name+'ul'）。追加（this）；
});
}
});

这里有一种可能性：

示例：

$（'ul>li.foo'）
.filter（函数（）{
var$th=$（本）；
返回$th.next（'li.foo'）.length&！$th.prev（'li.foo'）.length；
})
.each（函数（{
var$th=$（本）；
变量len=$th.append（“”）
.nextUntil（“：not（li.foo）”）.wrapAll（“
”）.length；
$th.next（'ul'）。附于（本）之后；
$th.children（'a'）。prepend（len）；
});

EDIT:修复了

len

变量的错误，并添加了一个示例

---

解释：使用

.filter（）

的情况是，它将

li.foo

元素缩小到组中的第一个（后面至少有一个

li.foo

，前面没有）

然后使用

.each（）

附加

，获取下一个元素，直到它到达一个非

li.foo

的元素，用

包装这些元素，并返回使用

length

属性的元素数量

然后我们遍历到新的

并将其附加到组中的第一个

li.foo

---

最后，我们将存储在

length

属性中的数量预先添加到

元素。

最终结果是每个组中的第一个都可见，并且附加了一个新的锚定标记以切换组其余部分的可见性。我已经成功地编写了一些有效的代码，但它有点复杂，我怀疑有一种更纯粹的jQuery方法可以实现这一点。不要使用

class

作为变量名。它在某些浏览器中会中断，因为它是未来的保留字。感谢您的回复和解释@梅洛松-不客气o） @galambalazs-谢谢你的+1:o）