17

重複の可能性：
データ属性の数値で要素を並べ替える

divを、最大の整数から最小の範囲のデータ属性セットに従って再編成したいと思います。現在、すべてのデータを配列にプッシュして並べ替えていますが、どのように進めるかがわかりません。これを使用して、親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のような配列が得られます。今、私のアイデアは、次のようなセレクターを使用して、divをもう一度ループすることでした。

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

しかし、divを移動する方法がわかりません（データ属性の整数が最も高いdivを一番上に移動する必要がありますなど。何か考えはありますか？

4

3 に答える 3

36

ここに解決策があります

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/

于 2013-01-21T12:33:24.153 に答える
0 
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);
}

働くフィドル

于 2013-01-21T12:31:57.877 に答える
-1

ここで説明されている関数を適応させることができます: 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/

于 2013-01-21T12:30:12.513 に答える