前端,用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;width:50px;height:50px;margin-left:-20px;background-image:url(~/buttonClick.png)" />*@
                        <a href="#" id="Yd" style="color:red;margin-top:50px;width: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;width: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循環去重,我這里是兩百多個項目,性能影響不大,

但是對於數據量更大的場景來講,可能不是那么好用,哪位大神有更好的辦法,還請留言指教


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM