Как сортировать DIVs по высоте?

у меня есть три divs, и я хочу отсортировать их по высоте, от самого большого до самого маленького.

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

есть идеи?

8
height html jquery sorting

5 ответов

Это довольно просто. Использовать .sort():

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

код:http://jsfiddle.net/fEdFt/2/

10

поскольку jQuery возвращает массив, вы можете использовать sort метод на массиве для изменения порядка элементов. После того, как они отсортированы в правильном порядке, вы можете удалить их из DOM и вставить их в нужном порядке.

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

Я думаю http://james.padolsey.com/javascript/sorting-elements-with-jquery/ может предоставить вам хорошую отправную точку.

0

Я не помню, будет ли jQuery обертывать обычный объект array или нет, но если нет, вы можете использовать селектор для получения divs, а затем использовать Array.сортировка (sortFunc)для сортировки.

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

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

divsToSort.sort(sortByHeight);
0
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>
0