2

この質問はこの質問に関連していますが、助けが必要な別の問題があります。div を 2 つのグループにグループ化できるようにしたいと考えています。両方ともソートされています。並べ替えは既に機能していますが、どうすれば dov を 2 つのグループに分けることができますか? グループ 2 のコンテナ div には、class="anotherGroup" を持つ要素が含まれています。

マークアップはこれです：

<div class="container">
  <div class="terminal" data-price="195">
      <h3>195</h3>
  </div>
  195 - I should come in 2nd in group 1 which is displayed first.
</div>

<div class="container">
  <div class="terminal" data-price="220">
      <h3>220</h3>
  </div>
  220 - I should come in 3rd in group 1 which is displayed first.
</div>

<div class="container">
  <div class="terminal" data-price="740">
      <h3>740</h3>
  </div>
  740 - I should come in 2nd in group 2 which is displayed last.
  <div class="anotherGroup">Group 2</div>
</div>

<div class="container">
  <div class="terminal" data-price="140">
      <h3>140</h3>
  </div>
  140 - I should come in 1st in group 2 which is displayed last.
  <div class="anotherGroup">Group 2</div>
</div>

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

脚本：

$('.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);
});

ここでフィドル。

最終結果は次のようになります。

130
195
220
140
740

140 と 740 は、クラス名が「anotherGroup」の要素を含んでいるため、独自のグループに属しています。これが理にかなっていることを願っています。どんな助けでも大歓迎です。

4

2 に答える 2

1

data-group で別のものを動的に追加できます：

// attr() required for dynamic data-xxx
$('.terminal').attr('data-group', 'Group 1'); 
$('.anotherGroup').each(function(el) {
    $(this).prev('.terminal').attr('data-group', $(this).html());
});
// Result : <div class="terminal" data-price="140" data-group="Group 2">

と の連結を使用しdata-groupてdata-price要素を比較します。

$('.terminal').sort(function (a, b) {
    var atxt = $(a).data('group')+$(a).data('price');
    var btxt = $(b).data('group')+$(b).data('price');
    return atxt.toLowerCase().localeCompare(btxt.toLowerCase());
}).map(function () {
    return $(this).closest('.container');
}).each(function (_, container) {
    $(container).parent().append(container);
});

更新された JsFiddle

注 : これは、アルファベット順 (「グループ 2」、「グループ 3」...) を守っていれば、どのグループでも機能します。

于 2013-09-18T10:06:37.160 に答える