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

Question

我有一个无序列表，如下

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

这是一个祖 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>

我以前从未遇到过这个问题。每当我不得不订购一份 list 时，我都会订购整个 list 。有没有人对我如何解决这个问题有任何聪明的建议或建议。

当前 fiddle http://jsfiddle.net/p70Lagyp/

Answer 1

它不漂亮，并且迭代多次，但这应该可以工作

$('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 放回到父级中，撤消嵌套结构。