对具有相同类级别的不同li元素进行排序

Sort different li elements with same class level

本文关键字：li 元素 排序 同类      更新时间：2023-09-26

我有一个无序列表，如下

<ul>
    <li class="A">abb</li>
        <li class="B">dbb</li>
            <li class="C">zbb</li>
            <li class="C">abb</li>
        <li class="B">ybb</li>
            <li class="C">abb</li>
            <li class="C">zbb</li>
            <li class="C">zab</li>
    <li class="A">zbb</li>
    <li class="A">xbb</li>
    <li class="A">cbb</li>
        <li class="B">bbb</li>
            <li class="C">cbb</li>
            <li class="C">abb</li>
</ul>

这是一个grand parent>parent>child关系，我希望在保持个人关系结构的同时按字母顺序排列它们。不幸的是，导入时无法更改标记，因为它是在其他地方生成的。

期望输出：

<ul>
    <li class="A">abb</li>
        <li class="B">dbb</li>
            <li class="C">abb</li>
            <li class="C">zbb</li>
        <li class="B">ybb</li>
            <li class="C">abb</li>
            <li class="C">zab</li>
            <li class="C">zbb</li>
    <li class="A">cbb</li>
        <li class="B">bbb</li>
            <li class="C">abb</li>
            <li class="C">cbb</li>
    <li class="A">xbb</li>
    <li class="A">zbb</li>
</ul>

我以前从未遇到过这个问题。每当我不得不订购一份清单时，我都会订购整个清单。有人对我如何处理这个问题有什么聪明的建议或建议吗。

当前Fiddlehttp://jsfiddle.net/p70Lagyp/

它不漂亮，可以迭代多次，但这应该能在中工作

$('li').each(function() {
    $(this).nextUntil('.' + this.className).appendTo(this);
}).each(function() {
    $(this).siblings('.' + this.className).addBack().sort(function(a,b) {
        var _a = $(a).clone(),
            _b = $(b).clone();
        _a.add(_b).children().remove();
        return _a.text().localeCompare( _b.text() );
    }).appendTo($(this).parent())
}).each(function() {
    var parent = $(this).parent();
    if (parent.prop('tagName').toLowerCase() === 'li')
        $(this).siblings('.' + this.className).addBack().insertAfter(parent);
});

解释：首先，它迭代所有LI，获得与当前元素不具有相同类的下一个元素，这将创建一个嵌套层次结构，以便能够对它们进行单独排序
当创建嵌套结构时，它会再次迭代，这一次是获得同一类的所有同级，并用addBack将原始结构添加回，然后根据文本内容对它们进行排序，这意味着它们必须是克隆并删除子LI
最后，它将LI放回父级，撤消嵌套结构。

相关文章：