-2

所以，我有类似的东西：

<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 的最快方法是什么？

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

（仅纯 javascript，不是 jQuery）

谢谢

4

4 回答 4

2

这将起作用：

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 对象上的内置排序机制，这可能相当快。

于 2013-01-06T20:21:58.173 回答
1

这是我的解决方案：

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;

在这里摆弄

于 2013-01-06T20:25:33.130 回答
1

虽然有点麻烦，但这确实很好。不确定您现在使用的速度，但这运行起来非常有效：

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

你总是可以优化代码和你有什么。

于 2013-01-06T20:28:41.740 回答
0

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

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

于 2013-01-06T20:32:56.203 回答