-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];
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 に答える
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 に答える
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 に答える