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

【问题标题】：How to sort DIVs by height?如何按高度对 DIV 进行排序？
【发布时间】：2011-11-24 15:50:44
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

你能把你到目前为止所做的代码贴出来吗？
@CasparKleijne - 我们不会有太多 :) 我基本上只是使用 jQuery('div').height() 但不确定一旦我得到 vals 如何实际排序？
@Andy 你想重新排列页面上的那些 DIV，或者只是对引用数组进行排序？
@Sime - 想要在页面上排列 - 实际上按值排列并存储在某个 var 中，然后在页面上重新排列

标签： jquery sorting html height

【解决方案1】：

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

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

【讨论】：

你能为我提供一个 jsfiddle 吗？ :)

【解决方案2】：

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>

【讨论】：

【解决方案3】：

我不记得 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);

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

Sort 不是 jQuery 方法，而是数组上的方法。
@Samich - 我将如何存储退货？也就是说，我知道哪个 div 排在第一位、第二位和第三位等
如果你需要这个divs 的排序列表，而不是全部放在表达式的末尾。查看最新代码：jsfiddle.net/fEdFt/4

【解决方案5】：

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

【讨论】：

是的，我想知道是否可以不使用插件？即只是一些简单的原始 jQuery ？