Question

所以，我有类似的东西：

<ul>
   <li data-index="34"></li>
   <li data-index="2"></li>
   <li data-index="28"></li>
   <li data-index="6"></li>
   <li data-index="79"></li>
   <li data-index="1"></li>
</ul>

使用该数据索引订购Dom的最快方法是什么？

我正在使用冒泡排序algorythm，但试图找到一个更快的。

（仅限纯JavaScript，不是jQuery）

由于

Answer 1

这将有效：

var ul = document.getElementById( 'your ul element name' );
var arr = [ ];
for ( var i = 0; i < ul.children.length; ++i )
    arr.push( ul.children[ i ] );

arr.sort( function( a, b ) {
    return +a.getAttribute( 'data-index' ) - +b.getAttribute( 'data-index' );
} );

for ( i = 0; i < arr.length; ++i )
    ul.appendChild( arr[ i ] );

告诉我你是否需要解释。该解决方案使用Array对象上的内置排序机制，这可能相当快。

Answer 2

这是我的解决方案：

var ul = document.getElementsByTagName('ul')[0],
    lis = ul.getElementsByTagName('li'),
    values = [],
    html = '';

for (var i=0; i<lis.length; i++) {
  values.push(lis[i].getAttribute('data-index'));
}

values = values.sort();
for (var i=0; i<values.length; i++) {
  var el = document.querySelectorAll('[data-index="' + values[i] + '"]')[0];
  html += el.outerHTML;
}
ul.innerHTML = html;

小提琴here

Answer 3

虽然有点麻烦，但这样做非常好。不确定你现在正在使用的速度，但这非常有效：

var ul = document.getElementsByTagName("ul")[0];
var lis = ul.getElementsByTagName("li");
var len = lis.length;
var indexs = [];
var obj = null;
var getByIndex = function(j){
    var li = null;
    for(var i = 0; i < len; i++) {
        li = lis[i];
        if(obj.getAttribute("data-index") == j) {
            break;
        }
    }
    return(li);
};
for(var i = 0; i < len; i++) {
    indexs.push(lis[i].getAttribute("data-index"));
}
indexs.sort(function(a, b){return(a - b);});
for(var i = 0; i < len; i++) {
    obj = getByIndex(indexs[i]);
    ul.appendChild(obj);
}

您可以随时优化代码和使用者。

Answer 4

这里应该这样做。不确定它是否是最佳性能，但它很短：

var items = document.querySelectorAll('li'),
    ul = items[0].parentNode;

[].slice.call( items ).sort(function( a,b ) {
  return a.getAttribute('data-index') - b.getAttribute('data-index');
}).forEach(function( item ) {
  ul.appendChild( item );
});

演示： http://jsbin.com/obasiq/1/edit

使用data-attribute命令节点

4 个答案: