Мне нужно выполнить следующую задачу: есть два элемента 'ul', содержащие несколько '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, я получаю результирующие массивы, содержащие номера идентификаторов элементов:
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/