jquery 按子元素的大小对 ul 元素进行排序

Question

只是一个关于 HTML 元素排序的简短问题。

如果有超过 10 个具有不同大小的子项的无序列表。重新订购的方法是否简单？

HTML 示例:

<div id="wrapper">
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
    </ul>
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
</div>

这就是我想要的:

    <div id="wrapper">
    <ul>
        <li>One</li>
        <li>Two</li>
    </ul>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li
    </ul>
</div>

Answer 1

使用普通 .sort() 就相当容易了。

• 获取元素
• 分离它们
• 对它们进行排序
• 将它们添加回 DOM

JavaScript

var $wrapper = $('#wrapper');

// Get children and detach
var children = $wrapper.children().detach();

// Sort them
children.sort(function(a, b) {
    // Compare amount of children
    return $(a).children().length - $(b).children().length;
});

// Add them back
$wrapper.append(children);

查看 demo .