2

HTML要素のjavascriptソートの続き

<ol>要素を別の(最終的には で)並べ替えたい 並べ替えは、 では<div>なくインプレースであることが望ましいです。unwrap()sort()wrap

HTML

<ol class="table" 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>
</ol>
<ol class="table">
    <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>

JavaScript

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

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

私が探している結果は

<ol class="table" style="display: block; ">
    <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">I</li>
</ol>
<ol class="table">
    <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">IXX</li>
    <li class="menu__test">st</li>
    <li class="menu__test">st</li>
    <li class="menu__test">st</li>
</ol>

a,b を DOM 要素とし、a が b よりも下に表示され (ドキュメント内の位置は下)、value(a) > value(b) の場合、ドキュメント内で a と b が入れ替わります。a と b が兄弟でなくても構いません。

http://jsfiddle.net/yqd3w/7/

4

1 に答える 1

4

比較を少なくしてタスクを高速化するには、次のようにします。

$(".table").each(function(){
    var list = $(this).children().get().sort(sort_by_name);
    for (var i = 0; i < list.length; i++)
        this.appendChild(list[i]);
}​);

...結果には影響しませんが。

編集：わかりました、私はあなたを手に入れました：

var $t = $(".table");
var list = $t.children().get().sort(sort_by_name);
$t.map(function() {
    return {t:this, l:this.childNodes.length};
}).each(function(i, o) {
    $(o.t).append(list.splice(0, o.l));
});
于 2012-04-17T08:02:36.890 に答える