javascript排列的HTML元素 [英] javascript sort of HTML elements in-place

问题描述

继续 javascript类HTML元素

我想对不同< ol> 中的元素进行排序（最终在< div> ）
排序最好是就地而不是 unwrap（）， sort（）和换行

I want to sort elements in different <ol>( eventually in <div>) the sort should preferably be in-place and not to unwrap(),sort() and 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

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元素，列表中的b低于b（低位是在文档中）和值（a）>值（b）然后a和b将在文档中切换。无论a和b可能不是兄弟姐妹。

let a,b be DOM elements, and a appear lower on the list than b (lower is position in the document ) and value(a) > value(b) then a and b will be switched in the document. no matter that a and b may not be siblings.

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

推荐答案

通过减少行动来加速完成任务比较，你可以这样做：

To speed the task up by doing less comparisons, you can do:

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

...虽然它不会影响结果。

...although it does not affect the result.

编辑：好的，我找到了你：

OK, I got you:

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));
});

这篇关于javascript排列的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！