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>

这是grand parent＆gt; parent＆gt; 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>

我之前从未遇到过这个问题。每当我不得不订购一个列表时，就是一个整体排序列表的情况。有没有人对如何解决这个问题有任何明智的建议或建议。

当前小提琴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元素进行排序

1 个答案: