2

サブ要素の data-price 属性に基づいて div のリストをソートできる必要があります。これは私のマークアップです:

<div class="container">
  <div class="terminal" data-price="195">
      <h3>195</h3>
  </div>
  195 - I should come in 2nd.
</div>

<div class="container">
  <div class="terminal" data-price="220">
      <h3>220</h3>
  </div>
  220 - I should come in 3rd.
</div>

<div class="container">
  <div class="terminal" data-price="130">
      <h3>130</h3>
  </div>
  130 - I should come in 1st.
</div>

これは私がこれまで持っているスクリプトです:

function sorter(a, b) {
    return a.getAttribute('data-price') - b.getAttribute('data-price');
};
$(document).ready(function () {
        var sortedDivs = $(".terminal").toArray().sort(sorter);
        $.each(sortedDivs, function (index, value) {
            $(".container", this).html(value);
            //console.log(value);
        }); 
});

結果は、既存のマークアップを置き換える必要があります。私はちょうど仕事に行くことができません。何を変更する必要がありますか？

ここにフィドルがあります。

4

2 に答える 2

11

以下はうまくいくはずです：

$('.container').sort(function (a, b) {
  return $(a).find('.terminal').data('price') - $(b).find('.terminal').data('price');
}).each(function (_, container) {
  $(container).parent().append(container);
});

ただし、共通の親なしでこれを行うことはお勧めしません。$(container).parent().append(container);他の子ノードが存在する場合、パーツに問題が生じる可能性があります。

デモ： http: //jsbin.com/UHeFEYA/1/

または、これを行うこともできます：

$('.terminal').sort(function (a, b) {
  return $(a).data('price') - $(b).data('price');
}).map(function () {
  return $(this).closest('.container');
}).each(function (_, container) {
  $(container).parent().append(container);
});
于 2013-09-17T10:50:49.003 に答える
0

それらを に配置する場合は、次のbodyようにします。

function sorter(a, b) {
    return a.getAttribute('data-price') - b.getAttribute('data-price');
};

var sortedDivs = $(".terminal").toArray().sort(sorter);

$(".container").remove(); //removing the old values

$.each(sortedDivs, function (index, value) {
    $('body').append(value);   //adding them to the body
});

リビングデモ: http://jsfiddle.net/a2TzL/1/

于 2013-09-17T10:50:26.400 に答える