2

只是一个关于排序 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>
4

2 回答 2

4

使用 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);

查看演示。

于 2013-09-19T12:24:57.253 回答
0

基于 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;
});

见小提琴

于 2017-01-01T20:12:40.517 回答