0

次のタスクを実行する必要があります。一意のIDを持ついくつかの「li」を含む2つの「ul」要素があります。

    <div id="sr">
        <ul id="li-fav">
            <li id="app-1">a</li>
            <li id="app-2">b</li>
            <li id="app-3">c</li>
        </ul>
        <ul id="li-rest">
            <li id="app-4">d</li>
            <li id="app-5">e</li>
            <li id="app-6">f</li>            
        </ul>
    </div>

getElementsOrder関数を使用して、要素の番号IDを含む結果の配列を実現します。

function getElementsOrder(){
    var f, r,
    fLi = [], rLi = [];

    f = document.getElementById('apps-fav').childElementNodes;
    console.log(f);
    for(var i=0, l=f.length; i<l; i+=1){
        fLi.push(f[i].id.split('-')[1]);
    }
    r = document.getElementById('apps-rest').childElementNodes;
    for(i=0, l=r.length; i<l; i+=1){
        rLis.push(r[i].id.split('-')[1]);
    }

    return {'fav': fLi, 'rest': rLi};
}

// {'fav': [1, 2, 3], 'rest': [4, 5, 6]}

ここで、異なる順序の配列からデータを読み取るときliに、両方の要素を並べ替える機能が必要です。つまり、次のようになります。ul

//{'fav': [3, 4, 1], 'rest': [2, 5, 6]}

最もブラウザフレンドリーな方法でこれを行う方法は？document fragment？を使用する ステップは何ですか？jsfiddleにサンプルがあります：

http://jsfiddle.net/PTx3f/

4

1 に答える 1

1

次の行に沿ってli要素を移動できます。

var favs = obj.fav;  // where obj is the object returned by getElementsOrder() 
var i = favs.length;
var ul = document.getElementById('li-fav');

while (i--) {
  ul.insertBefore(document.getElementById('app-' + favs[i]), ul.firstChild);  
}

var rest = obj.rest;
i = rest.length;
ul = document.getElementById('li-rest');

while (i--) {
  ul.insertBefore(document.getElementById('app-' + rest[i]), ul.firstChild);  
}

insertBeforeを使用して要素が正しい順序になるように、カウントが減少することに注意してください。ロジックの重複を取り除くために、コードをリファクタリングする必要があります。

編集-リファクタリング

function doStuff() {
  var i, ids, list, ul; 

  for (list in obj) {

    if (obj.hasOwnProperty(list)) {
      ids = obj[list];  
      i = ids.length;
      ul = document.getElementById('li-' + list);

      while (i--) {
        ul.insertBefore(document.getElementById('app-' + ids[i]), ul.firstChild);  
      }
    }
  }
}

継承された列挙可能なプロパティから保護するためにhasOwnPropertyテストを追加しました。

于 2011-07-06T01:12:31.570 に答える