web-dev-qa-db-ja.com

jQueryで<UL> / <OL>を注文する最も簡単な方法は何ですか？

HTMLリストのリストアイテムをアルファベット順に並べ替えるサンプルコードを探しています。誰か助けてもらえますか？

以下は、作業する人のためのサンプルリストです。

<ul class="alphaList">
    <li>apples</li>
    <li>cats</li>
    <li>bears</li>
</ul>
jquerysorting
42
Eric Schoonover
var items = $('.alphaList > li').get();
items.sort(function(a,b){
  var keyA = $(a).text();
  var keyB = $(b).text();

  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
});
var ul = $('.alphaList');
$.each(items, function(i, li){
  ul.append(li); /* This removes li from the old spot and moves it */
});
94
Chatu

今後のGoogle社員にとって、このプラグインは非常に便利です。ラテン語以外の言語の文字の順序を定義するオプションがあります。

古いバージョン（jQueryに依存）

$('.submenu > li').tsort({
    charOrder: 'abcçdefgğhıijklmnoöprsştuüvyz'
});

英語のみの文字の場合、定義するオプションは必要ありません

$('.submenu > li').tsort();

現在のバージョン（jQueryに依存しない）（2016年3月29日）

Tinysortの現在のバージョンはjQueryから独立しています。純粋なJavaScript。新しいバージョンを使用するためにjsfiddleを更新しました。

tinysort('.submenu > li', {
    charOrder: 'abcçdefgğhıijklmnoöprsştuüvyz'
});

デモhttp://jsfiddle.net/ergec/EkScy/

ウェブサイトhttp://tinysort.sjeiti.com/

7
Ergec

これを試して：

var elems = $('.alphalist li').detach().sort(function (a, b) {
  return ($(a).text() < $(b).text() ? -1 
        : $(a).text() > $(b).text() ? 1 : 0);
}); 
$('.alphalist').append(elems);
7
berniecc