javascript - HTML要素のjavascriptソート

Question

要素を並べ替えてli、予期しない結果を得ようとしています。正しく取得するには、3 回並べ替える必要があります。

私はどこを間違えたのですか？JavaScript

var sort_by_name = function(a, b) {
    return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase();
}
$this = $("ol#table1");
var list = $this.children();
list.sort(sort_by_name);
console.log(list);
$this.html(list);

HTML

<ol id="table1" style="display: block; ">
   <li class="menu__run">I</li>
   <li class="menu__run">IXX</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li> 
   <li class="menu__run">IXX</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__test">st</li>
   <li class="menu__test">st</li>
   <li class="menu__test">st</li>
</ol>

フィドルの例

score 45 · Accepted Answer

並べ替えるには、もっと良い方法があります。

正しい値 (-1、0、および 1) を返す比較関数が必要です。
localeCompare()そんな比較機能です。
HTML を再生成するのではなく、DOM 要素を移動するだけで済みます。
元のセレクターで LI 要素を直接取得できます。
"#table1"より効率的なセレクターです"ol#table1"。

私はこれを提案します：

$("div#btn").click(function() {
    var sort_by_name = function(a, b) {
        return a.innerHTML.toLowerCase().localeCompare(b.innerHTML.toLowerCase());
    }

    var list = $("#table1 > li").get();
    list.sort(sort_by_name);
    for (var i = 0; i < list.length; i++) {
        list[i].parentNode.appendChild(list[i]);
    }
});

ここで作業を見ることができます：http://jsfiddle.net/jfriend00/yqd3w/

score 8 · Accepted Answer

カスタムcompareFunctionは、-1、0、または1を返す必要があります。

function sort_by_name(a, b) {
    var sa = a.innerHTML.toLowerCase(), sb = b.innerHTML.toLowerCase();
    return sb<sa ? -1 : sb>sa ? 1 : 0;
}

score 6 · Accepted Answer

var sort_by_name = function(a, b) {
    return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase());
}

代わりにlocaleCompareを使用して、物事をよりエレガントで実行可能にすることができます。

jsfiddlehttp://jsfiddle.net/Qww87/11/を参照してください

score 1 · Accepted Answer

ドキュメントによると、数値が必要です。よりわかりやすい:

    var sort_by_name = function(a, b) {
         if(a.innerHTML.toLowerCase() < b.innerHTML.toLowerCase()) return -1;
         if(a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase()) return 1;
         return 0;
    }

score 1 · Accepted Answer

私のjqueryプラグインSort Contentを使用してください：

   $('ol#table1').sortContent({asc:true})

それでおしまい！

デモ: http://jsfiddle.net/abdennour/SjWXU/

javascript - HTML要素のjavascriptソート

5 に答える 5

Related

Reference