动态配置dom的顺序

发布时间:2020-06-18 22:02:52 作者:蠢蠢的蜗牛
来源:网络 阅读:335

对于页面上的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应该还有很多改进的空间,有时间再研究
推荐阅读:
  1. 动态NAT的配置过程
  2. 动态NAT的配置

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

排序

上一篇:利用zabbix动态监控磁盘I/O

下一篇:CentOS 6.5上安装JIRA 6.3.6

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》