动态配置dom的顺序

对于页面上的dom元素，如果想要通过一个数组来确定一组dom元素的顺序，如果vue element 都是很简单可以实现的

 <ul> <li v-if="item in lidata" :id="item.id">{{item.name}}</li> </ul>

js:

... data：function(){ return{ lidata:[{"id":"1","name":"刘明"}, {"id":"2","name":"张飞"}, {"id":"3","name":"关羽"}] } } ...

但是如果是jquery 怎么弄呢？一个一个比较之后重新插入效率是有点低的

所以我做了个简单优化

farraysort: function (keyarray) { //数组排序 e1,e2对应div 的id /** * [e1: *,e2, * e3, * e4]; */ // keyarray = ["e1, "e2", "e3", "e4",];//默认值 var oldKeyarray = JSON.parse(localStorage.getItem("sortKey")); var issame = true;//判断数组是否有变化 if (oldKeyarray) { console.log(oldKeyarray.construct); oldKeyarray.forEach(function (item, index) { if (item !== keyarray[index]) { issame = false; return; } }); if (issame) {//如果顺序一致就不用排序了。针对刷新页面 return; } else { localStorage.setItem("sortKey", JSON.stringify(keyarray)); } } else {//顺序存在本地，便于比较 localStorage.setItem("sortKey", JSON.stringify(keyarray)); } //将对应dom元素获取到放到一个对象中 var array = { "e1": document.getElementById("e1"), "e2": document.getElementById("e2"), "e3": document.getElementById("e3"), "e4": document.getElementById("e4") }; //创建Fragment var elementfrag = document.createDocumentFragment(); keyarray.forEach(function (item) {//创建dom片段 elementfrag.appendChild(array[item]); }); //一次性插入 document.getElementById("sortContainer").appendChild(elementfrag); }

 这个diff应该还有很多改进的空间，有时间再研究