根据元素id为'的数组重新排列元素布局;s

Reorder elements layout according to array with elements id's

本文关键字：元素 新排列 布局 排列 id 数组      更新时间：2023-09-26

我需要执行以下任务：有两个"ul"元素包含一些具有唯一id的"li"。

    <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]}

现在，当从不同排序的数组中读取数据时，我希望能够重新排序两个ul中的li元素，即：

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

如何以最友好的浏览器方式做到这一点？使用document fragment？台阶应该是什么？我有jsfiddle上的样品：

http://jsfiddle.net/PTx3f/

您可以沿着以下行移动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测试来保护继承的可枚举属性。

相关文章：