web-dev-qa-db-ja.com

JavaScriptでHTMLリストをソートする

ページの読み込み時に高から低に自動的に表示する3つのリストアイテムのセットがあります。理想的には、jqueryまたはjavascriptを使用します。

<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>

各リスト項目には個別の背景画像があるため、各リスト項目には独自のIDが必要です。ユーザーが編集できるように、番号はノードにテキストを入力する必要があります。

javascriptjqueryhtmlsortinghtml-lists
15
danssker

これはjQueryを使用しないため、おそらくこれが最も高速な方法です。

function sortList(ul){
    var new_ul = ul.cloneNode(false);

    // Add all lis to an array
    var lis = [];
    for(var i = ul.childNodes.length; i--;){
        if(ul.childNodes[i].nodeName === 'LI')
            lis.Push(ul.childNodes[i]);
    }

    // Sort the lis in descending order
    lis.sort(function(a, b){
       return parseInt(b.childNodes[0].data , 10) - 
              parseInt(a.childNodes[0].data , 10);
    });

    // Add them into the ul in order
    for(var i = 0; i < lis.length; i++)
        new_ul.appendChild(lis[i]);
    ul.parentNode.replaceChild(new_ul, ul);
}

次のような関数を呼び出します。

sortList(document.getElementsByClassName('list')[0]);

同じ方法で他のリストを並べ替えることができます。リストクラスを使用して同じページに他の要素がある場合は、ulにIDを指定し、代わりにそれを使用して渡す必要があります。

例JSFiddle

編集

PageLoadで実行することを希望していると述べたので、ulがDOMにある後にできるだけ早く実行することを想定しています。つまり、関数sortListをページの先頭に追加して使用する必要があります。次のようにあなたのリストの直後に：

<head>
    ...
    <script type="text/javascript">
        function sortList(ul){
            var new_ul = ul.cloneNode(false);
            var lis = [];
            for(var i = ul.childNodes.length; i--;){
                if(ul.childNodes[i].nodeName === 'LI')
                    lis.Push(ul.childNodes[i]);
            }
            lis.sort(function(a, b){
               return parseInt(b.childNodes[0].data , 10) - parseInt(a.childNodes[0].data , 10);
            });
            for(var i = 0; i < lis.length; i++)
                new_ul.appendChild(lis[i]);
            ul.parentNode.replaceChild(new_ul, ul);
        }
    </script>
</head>
<body>
    ...
    <ul class="list">
        <li id="alpha">32</li>
        <li id="beta">170</li>
        <li id="delta">28</li>
    </ul>
    <script type="text/javascript">
        !function(){
            var uls = document.getElementsByTagName('ul');
            sortList( uls[uls.length - 1] );
        }();
    </script>
    ...
</body>
17
Paulpro

この軽量のjqueryプラグインを使用できます List.js 原因

  1. 軽量[3Kスクリプトのみ]
  2. クラスを使用して既存のHTMLテーブルに実装するのは簡単
  3. 検索可能、ソート可能、およびフィルター可能

[〜＃〜] html [〜＃〜]

<div id="my-list">
    <ul class="list">
       <li>
           <h3 class="name">Luke</h3>
       </li>
       <li>
           <h3 class="name">John</h3>
       </li>
    </ul>
</div>

Javascript

var options = {
    valueNames: ['name']
};
var myList = new List('my-list', options);
6
AbdullahDiaa

あなたはこれを試すことができます

var ul = $(".list:first");
var arr = $.makeArray(ul.children("li"));

arr.sort(function(a, b) {
    var textA = +$(a).text();
    var textB = +$(b).text();

    if (textA < textB) return -1;
    if (textA > textB) return 1;

    return 0;
});

ul.empty();

$.each(arr, function() {
    ul.append(this);
});

ライブの例： http://jsfiddle.net/B7hdx/1

5
Francis

このコードは、.listアイテムが1つしかないと想定してリストをソートします。

function sortList(selector) {
    var parent$ = $(selector);
    parent$.find("li").detach().sort(function(a, b) {
        return(Number(a.innerHTML) - Number(b.innerHTML));
    }).each(function(index, el) {
        parent$.append(el);
    });
}

sortList(".list");

あなたはそれがここで機能するのを見ることができます： http://jsfiddle.net/jfriend00/FjuMB/

それがどのように機能するかを説明するには：

  1. .list親オブジェクトを取得します。
  2. すべての<li>子オブジェクトを検索します。
  3. DOMからすべての<li>子オブジェクトを削除しますが、それらのデータは保持します
  4. カスタムソート関数を使用してliオブジェクトをソートします
  5. カスタムソート関数はliタグ内のHTMLを取得し、それを数値に変換します
  6. 次に、新しくソートされた順序で配列を走査すると、各liタグが元の親に追加されます。

その結果、それらはソートされた順序で表示されます。

編集：

この改良版では、複数のリストオブジェクトを一度に並べ替えることもできます。

function sortList(selector) {
    $(selector).find("li").sort(function(a, b) {
        return(Number(a.innerHTML) - Number(b.innerHTML));
    }).each(function(index, el) {
        $(el).parent().append(el);
    });
}

sortList(".list");

デモ： http://jsfiddle.net/jfriend00/RsLwX/

3
jfriend00

この小さなjQueryプラグイン もあります。これはあなたの並べ替えを他の何にもしません：

$('.list>li').tsort({attr:'id'});
3
Sjeiti

jquery以外のバージョン（Vanilla javascript）

利点：リストは適切に並べ替えられます。これにより、LIが破壊されたり、LIに関連付けられている可能性のあるイベントが削除されたりすることはありません。周りをシャッフルするだけです

ULにIDを追加しました：

<ul id="myList" class="list">
    <li id="alpha">32</li>
    <li id="beta">170</li>
    <li id="delta">28</li>
</ul>

とバニラのjavascript（jqueryなし）

// Grab a reference to the UL
var container = document.getElementById("myList");

// Gather all the LI's from the container
var contents = container.querySelectorAll("li");

// The querySelector doesn't return a traditional array
// that we can sort, so we'll need to convert the contents 
// to a normal array.
var list = [];
for(var i=0; i<contents.length; i++){
    list.Push(contents[i]);
}

// Sort based on innerHTML (sorts "in place")
list.sort(function(a, b){
    var aa = parseInt(a.innerHTML);
    var bb = parseInt(b.innerHTML);
    return aa < bb ? -1 : (aa > bb ? 1 : 0);
});

// We'll reverse the array because our shuffle runs backwards
list.reverse();

// Shuffle the order based on the order of our list array.
for(var i=0; i<list.length; i++){
    console.log(list[i].innerHTML);
    container.insertBefore(list[i], container.firstChild);
}

そしてフィドル証明： https://jsfiddle.net/L27gpnh6/1/

2
bob

1つの方法は、li要素の 配列の並べ替え （jQueryオブジェクト）を使用して、コンテンツを置き換えることです（ html を使用） =メソッド）ulの要素のソートされた配列：

$(".list").html($(".list li").sort(function(a, b) {
     return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);    
}));

これが 動作例 です。

1
James Allardice

このような何かが役立つはずです：

var $parent = $(".list");

$(".list li").sort(function (a, b) {
    return window.parseInt($(a).text(), 10) - window.parseInt($(b).text(), 10);
}).remove().each(function () {
    $parent.append($(this));
});
1
jabclab

ヘルプのためのjQueryの使用：

var sortFunction = function(a, b) {
    return (+($(b).text())) - (+($(a).text()));
}
var lis = $('ul.list li');
lis = Array.prototype.sort.call(lis, sortFunction);

for (var i = 0; i < lis.length; i++) {
    $('ul.list').append(lis[i]);
}

フィドルリンク

0
Skyrim

この方法を使用できます。

var mylist = $('ul');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   var compA = $(a).text().toUpperCase();
   var compB = $(b).text().toUpperCase();
   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

こちらの記事を確認してください： http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

編集：それを行う非常にクールなjqueryプラグインがあります： http://tinysort.sjeiti.com/

0
T23

通常の配列としてjQueryコレクションを並べ替えてから、各要素を正しい順序で追加します。

$(".list li").sort(function(a, b) {
    return parseInt($(b).text(), 10) - parseInt($(a).text(), 10);    
}).appendTo('.list');

http://jsfiddle.net/zMmWj/

0
dfsq