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

对于vanilla .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。

Answer 2

根据Tims的回答，你可以将这个功能包装在像这样的jQuery函数中。

$.fn.sortChildren = function(sortCb){
  this.children().detach().sort(sortCb).appendTo(this);
};

然后你就可以像这样使用它来提高可读性和可重用性。

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

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

请参阅fiddle

jquery按子项大小排序ul元素

2 个答案: