zoukankan      html  css  js  c++  java
  • 前端,用js根据一个对象,去除另个对象中重复的元素

    这里的应用场景是,两个div盛放待选项目和已选项目,如下图

      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div class="form-group">
                                <label class="col-xs-4 control-label"><span style="color:red">  </span>待选</label>
                                <div class="col-xs-6" id="waitingSelect" style="overflow-y:auto;height:200px">
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-2">
                            @*<input type="button" id="Yd" value="->" style="color:red;margin-top:50px;50px;height:50px;margin-left:-20px;background-image:url(~/buttonClick.png)" />*@
                            <a href="#" id="Yd" style="color:red;margin-top:50px;50px;height:50px;margin-left:-60px;">
                                <img src="~/images/buttonClick.png" />
                            </a>
                            <div style="margin-top:50px">
                                <a href="#" id="MoveRest" style="color:red;margin-top:800px;50px;height:50px;margin-left:-60px;">
                                    <img src="~/images/moveRest.png" />
                                </a>
                            </div>
                        </div>
    
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="margin-top:-136px;">
                            <div class="form-group">
                                <label class="col-xs-4 control-label"><span style="color:red">  </span>已选</label>
                                <div id="selected" class="col-xs-6" style="overflow-y:auto;height:200px">
                                </div>
                            </div>
                        </div>
    

      

     待选和已选项目互斥,不能重复,

    我用的是这种方法去重

    function Move() {
        var che = document.querySelectorAll("#waitingSelect input[type='checkbox']");
        var selected = document.getElementById("selected");
        var flag = "";
        for (var i = 0; i < che.length; i++) {
            if (che[i].checked) {
                for (var item = 0; item < selected.childNodes.length; item++) {
                    if (selected.childNodes[item].childNodes[0].value == che[i].value) {
                        flag = "1";
                        break;
                    }
                    else
                    {
                        flag = "";
                    }
                }
                if (flag == "") {
                    $("#selected").append("<li style='list-style-type:none'><input type='checkBox' style='' value=" + che[i].value + ">" + che[i].nextSibling.nodeValue + "</li>");
                }
            }
            //che[i].checked = false;
        }
        var checkedObj = $('#waitingSelect input:checkbox:checked');
        checkedObj.parent('li').remove();
        document.getElementById("AllCheck").checked = false;
    }
    

      这是从待选项目移到已选项目的的按钮点击事件,用两个for循环去重,我这里是两百多个项目,性能影响不大,

    但是对于数据量更大的场景来讲,可能不是那么好用,哪位大神有更好的办法,还请留言指教

  • 相关阅读:
    在WINDOWS任务计划程序下执行PHP文件 PHP定时功能的实现
    使用Sublime Text 3进行Markdown 编辑+实时预览
    ni_set()函数的使用 以及 post_max_size,upload_max_filesize的修改方法
    CORS跨域的概念与TP5的解决方案
    tp5模型笔记---多对多
    微信小程序 GMT+0800 (中国标准时间) WXSS 文件编译错误
    ESP8266 LUA脚本语言开发: 外设篇-GPIO输入检测
    ESP8266 LUA脚本语言开发: 外设篇-GPIO输出高低电平
    ESP8266 LUA脚本语言开发: 准备工作-LUA文件加载与变量调用
    ESP8266 LUA脚本语言开发: 准备工作-LUA开发说明
  • 原文地址:https://www.cnblogs.com/jiuyueBlog/p/11957611.html
Copyright © 2011-2022 走看看