Question

我有三个div，我想按高度对它们进行排序，从最大到最小。

<div>smallest</div>
<div>largest</div>
<div>middle</div>

有什么想法吗？

Answer 1

这很简单。使用.sort()：

$('div').sort(function (a, b) {
    return $(a).height() > $(b).height() ? 1 : -1;  
}).appendTo('body');

代码：http://jsfiddle.net/fEdFt/2/

Answer 2

由于jQuery返回一个数组，您可以使用数组上的sort方法重新排序元素。按照正确的顺序对它们进行排序后，您可以将它们从DOM中删除，然后按照所需的顺序重新插入它们。

$('div.sortable').sort( function(a,b) {
   return $(b).height() - $(a).height();
}).appendTo('#container');

Answer 3

我认为http://james.padolsey.com/javascript/sorting-elements-with-jquery/可能会为您提供一个良好的起点。

Answer 4

我不记得jQuery是否会包装常规数组对象，但如果没有，你可以使用选择器来获取div，然后使用Array.sort（sortFunc）对它们进行排序。

var divsToSort = $('div');  // I believe this returns an array object.

function sortByHeight(a, b) {
   return $(a).height() - $(b).height();
}

divsToSort.sort(sortByHeight);

Answer 5

function sortNumber(a, b) {
            return a - b;
        }

        $(function () {
            var divOrder = [];
            $.each($('div'), function () {
                divOrder.push($(this).height());
            });


            var sortedByHeight = divOrder.sort(sortNumber);

            for (i = 0; i < sortedByHeight.length; i++) {
                $('div').eq(i).height(sortedByHeight[i]);
            }

        });

这个html是：

<div style='border:solid 1px #ccc; width:100px; height:100px; float:left;'></div>
<div style='border:solid 1px #ccc; width:100px; height:400px; float:left;'></div>
<div style='border:solid 1px #ccc; width:100px; height:200px; float:left;'></div>
<div style='border:solid 1px #ccc; width:100px; height:300px; float:left;'></div>

如何按高度对DIV进行排序？

5 个答案: