1

重複の可能性：
jQueryを使用してリストをアルファベット順に並べ替えるにはどうすればよいですか？

私はjQueryを使用して、限られたCMSセットアップを支援しています。

順序付きリストをアルファベット順に並べ替える必要がありますが、「特別な」リストアイテムをリストの一番上に配置し、「オプションの」数値の降順でそれらの特別なアイテムのみを再度並べ替えることもできる必要があります。

たとえば、これが私の元のマークアップだった場合：

<ul>
    <li class=" ">C</li>
    <li class=" ">A</li>
    <li class=" ">B</li>
    <li class=" ">E</li>
    <li class=" ">D</li>
    <li class="3">Z</li>
    <li class="6">Y</li>
    <li class="14">X</li>
</ul>

... jQueryで並べ替えて、結果のDOMコンテンツになるようにします。

<ul>
    <li class="14">X</li>
    <li class="6">Y</li>
    <li class="3">Z</li>
    <li class=" ">A</li>
    <li class=" ">B</li>
    <li class=" ">C</li>
    <li class=" ">D</li>
    <li class=" ">E</li>
</ul>

クラス値による並べ替えが不可能であるか、過度に複雑な場合は、代わりに次のマークアップ構造を使用できます。

<ul>
    <li><span class="numerical">3</span><span class="alphabetical">B</span></li>
</ul>

誰かが私がこれを行うことを可能にするjQueryコードを知っていますか？ネストされた一連の「each」アクションと、値を比較する「insertAfter」および「insertBefore」関数を実行する必要がありますか？もっと良い方法があると思いますが、どこから研究を始めればいいのかわかりません。

私はありとあらゆる提案を受け入れます。それまでの間、私もこれを自分で理解しようとしていますが、私はまだjQueryの新人なので、自分で正しいコードを見つけることができるとは思えません:)

ありがとう！！

4

1 に答える 1

4

コンパレータ機能と、要素を再配置する方法が必要です。前者が後者を実行するプラグインが利用可能ですが、要素が単一の親の唯一の子である場合、それは非常に簡単です（以下を参照）。

コンパレータには、要素のペアを指定できるものが必要であり、<li>どちらが先に来るかを教えてください。

function myCompare(a, b) {
    var cls_a = parseInt(a.classList, 10);
    var cls_b = parseInt(b.classList, 10);

    cls_a = cls_a || -1 ;   // make blank class == -1
    cls_b = cls_b || -1 ;   //   ditto

    if (cls_a === cls_b) {
        var str_a = a.innerText || a.textContent;
        var str_b = b.innerText || b.textContent;
        return str_a.localeCompare(str_b);
    } else {
        return cls_a - cls_b;  // numeric descending sort
    }
}

および再配置用：

var $el = $('li');
var $ul = $('ul');
$el.sort(myCompare);  // from above
$el.each(function() {
    $ul.append(this);
});

ループは.each、ソートされた各アイテムを取得し、それを<ul>-の最後に追加するだけで機能します。残りがない場合は、完了です。

上記のより短いバージョンが可能です。例：

$('li').sort(myCompare).appendTo($('ul'));

このjsfiddleを参照してください

于 2013-01-25T22:34:34.167 に答える