javascript就地HTML元素[关闭]

Question

继续javascript sort of HTML elements

我想对不同<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/

Answer 1

要通过减少比较来加快任务速度，您可以这样做：

$(".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));
});