0

さまざまな変数を使用してネストされたリストをソートしようとしています。だから、私は次のようなものを持っています：

<div id="title">
    <h2>AWARDS by TYPE</h2>
    <span>
      <p>Sort by: </p>
      <a href="#" class="sort-by-trophy">Trophy</a>
      <a href="#" class="sort-by-gold">Gold</a>
      <a href="#" class="sort-by-silver">Silver</a>
      <a href="#" class="sort-by-bronze">Bronze</a>
      <a href="#" class="sort-by-other">Other</a>
    </span>
 </div>

そしてリスト：

<ul id="accolade-display-list"> 
<li class="accolade-display-list-item"> <img src="/images/us/law/accolades/organisation/27.jpg">
<ul>
  <li class="accolades-org-name"> Argentina Wine Awards </li>
  <li class="accolades-org-details">Silver Medal - 2012, Argentina</li>
</ul>
</li>
<li class="accolade-display-list-item"> <img src="/images/us/law/accolades/organisation/2.jpg">
<ul>
  <li class="accolades-org-name"> Royal Adelaide Wine Show </li>
  <li class="accolades-org-details">Regional Trophy - 2012, Argentina</li>
</ul>
</li>
 <li class="accolade-display-list-item"> <img src="/images/us/law/accolades/organisation/57.jpg">
<ul>
  <li class="accolades-org-name"> Wines of Chile Awards </li>
  <li class="accolades-org-details"> Blue Gold Medal - 2012, Argentina</li>
</ul>
</li>
</ul>

私がやりたいのは、クリックして「トロフィー」と言って、「トロフィー」が一番上にあるアイテムを並べ替え、次に「ゴールド」をクリックしてそれらのアイテムを一番上にまとめることです。私の例ではそれぞれですが、いくつかの「金」のアイテム、「銀」のアイテムなどがあるかもしれません。いくつかの方法を試しましたが、せいぜいリストをアルファベット順に並べ替えることができただけで、これは私が必要としているものではありません。これらは JSP から取得され、必要に応じて追加のクラスを追加できる可能性があります。必要に応じてリスト構造を変更することもできます。<li>ネストされたリストを使用する理由は、単純に画像との位置合わせを容易にするためであり、将来追加の行 ( ) が存在する可能性があるためです。

リストをアルファベット順に並べ替える方法は、次のとおりです。

$("a.sort-by-trophy").click(function(){
console.log('sort-by-trophy clicked');
var list = $("ul#accolade-display-list");
var desc = false;
list.append(list.children().get().sort(function(a, b) {
var aProp = $(a).find(".accolades-org-name").text(),
    bProp = $(b).find(".accolades-org-name").text();
return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1);
}));
});

とにかく、誰かが私が試してみたいことについて何かアイデアを持っていれば、本当に感謝しています.

4

1 に答える 1

0

私がお勧めするのは、必要な値を取得してから、出力を生成し（underscore.jsを確認）、並べ替えをクリックするたびに、もう一度生成して置換することです。

私が言いたいのは、あなたが原始的なデータを持っているということです：

var list = [{name: 'Argentina Wine Awards', medal: 'silver', ... }, {}, ...];

次に、[並べ替え]リンクをクリックすると、リスト配列を正しいプロパティで並べ替え、新しいhtmlを生成し（アンダースコアテンプレートを使用）、古いhtmlを新しいものに置き換えます。

于 2012-10-04T15:20:01.553 に答える