Javascript/jQuery: переупорядочение div в соответствии с значениями атрибутов данных

Возможный дубликат:
Элемент сортировки по числовому значению атрибута данных

Я хочу реорганизовать divs в соответствии с установленным на них атрибутом данных, начиная от самого высокого целого и заканчивая самым низким. Прямо сейчас, я выталкиваю все данные в массив и сортирую, но я не уверен, как действовать. Как я могу использовать это для реорганизации div внутри родительского div?

var prices = new Array();
$(this).children('.listing-item').each(function() {
    var price = parseInt($(this).attr('data-listing-price'));
    prices.push(price)
});
prices.sort(function(a,b){return b-a});

Это дает мне массив, например 139,129,129,109,109,84. Теперь моя идея состояла в том, чтобы прокрутить divs в другой раз с помощью селектора, подобного этому:

$('.listing-item[data-listing-price="' + prices[0] + '"]')

но я не уверен, как перемещать divs (div с наивысшим значением целочисленного атрибута данных должен перемещаться в начало и т.д. Любая идея?

Ответы

Ответ 1

Вот решение

HTML:

<div id="list">
  <div class="listing-item" data-listing-price="2">2</div>
  <div class="listing-item" data-listing-price="3">3</div>
  <div class="listing-item" data-listing-price="1">1</div>
  <div class="listing-item" data-listing-price="4">4</div>
</div>

JS:

var divList = $(".listing-item");
divList.sort(function(a, b){
    return $(a).data("listing-price")-$(b).data("listing-price")
});
$("#list").html(divList);

JSFiddle:

http://jsfiddle.net/bittu4u4ever/ezYJh/1/

Ответ 2

var s = new Array;
var i = 0;
var x = $(".ch").length;
$(".ch").each( function() {
    s[i] = $(this).data("id");
    i++;
});
var g = s.sort(function(a,b){return a-b});
for(var c = 0; c < x; c++) {
    var div = g[c];
    var d = $(".ch[data-id="+div+"]").clone();
    var s = $(".ch[data-id="+div+"]").remove();
    $(".pa").append(d);
}

Рабочая скрипта

Ответ 3

Вы можете адаптировать описанную здесь функцию: Как отсортировать список по алфавиту с помощью jQuery? и просто изменить функцию сортировки ('<')

<div id="foo">
    <div class="test" data-listing-price="30">30</div>
    <div class="test" data-listing-price="62">62</div>
    <div class="test" data-listing-price="11">11</div>
    <div class="test" data-listing-price="43">43</div>
</div>

В вашем js (наивысшее целое число до самого низкого):

var div = $('#foo');
var listitems = div.children('div.test').get();
listitems.sort(function (a, b) {
 return (+$(a).attr('data-listing-price') > +$(b).attr('data-listing-price')) ?
  -1 : (+$(a).attr('data-listing-price') < +$(b).attr('data-listing-price')) ? 
   1 : 0;
})
$.each(listitems, function (idx, itm) { div.append(itm); });

http://jsfiddle.net/NfVxk/