这里的应用场景是,两个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循环去重,我这里是两百多个项目,性能影响不大,

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

前端,用js根据一个对象,去除另个对象中重复的元素的更多相关文章

  1. 去除List<Object>集合中重复的元素(利用HashSet的特性---无重复元素)

    import java.util.ArrayList;import java.util.HashSet;import java.util.Iterator; public class Hashset ...

  2. [转]java去除List中重复的元素

    java去除List中重复的元素 如果用Set ,倘若list里边的元素不是基本数据类型而是对象, 那么请覆写Object的boolean   equals(Object   obj)   和int  ...

  3. 用JS编写一个函数,返回数组中重复出现过的元素

    用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: , , , , , , , ]; var getRepeat = function (arr) { var obj = {}; , le ...

  4. 集合求交集 & 去除列表中重复的元素

    集合求交集: set1 = {1,2,3,4,5} set2 = {4,5,6,7,8} 交集:set3 = set1 & set2 print(ste3) #结果为{4,5} 或者ste1. ...

  5. Python 去除列表中重复的元素

    Python 去除列表中重复的元素 来自比较容易记忆的是用内置的set l1 = ['b','c','d','b','c','a','a'] l2 = list(set(l1)) print l2 还 ...

  6. js判断一个对象{}是否为空对象,没有任何属性

    // js如何判断一个对象{}是否为空对象,没有任何属性 if (typeof model.rows === "object" && !(model.rows in ...

  7. 百度前端学院js课堂作业合集+分析(更新中...)

    第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. JS(JQEERY) 获取JSON对象中的KEY VALUE

    var json= { "Type": "Coding", "Height":100 }; for (var key in json) { ...

  9. java去除数组中重复的元素方法总结

    /* * ArrayUnique.java * Version 1.0.0 * Created on 2017年12月16日 * Copyright ReYo.Cn */ package reyo.s ...

随机推荐

  1. opensns建站

    opensns建站 标签(空格分隔):软件工程 贪玩蓝月 购买云服务器 首选阿里云,一个月9.9元,还能直接安全宝塔Linux界面 后台初始化 输入ip地址:8888访问宝塔后台,第一次进入后台会让你 ...

  2. Node.js定时邮件的那些事儿

    近开发一个项目,需要在Node.js程序里实现定期给管理员发邮件的功能. 笔者平时只会在Web界面收发邮件.对邮件的原理完全不懂(可能大学教过,然而全忘了),直到要解决这个问题.请教了几个业务的同事, ...

  3. const char *转化为char *的方法

    直接将const char *赋值给char *是错误的,编译器不允许这种操作. #include "stdio.h" #include "string.h" ...

  4. 配置node 的路由

    配置路由 引入路由中间件 const Router= require('koa-router'); 实例化 const router= new Router(); 配置路由地址 router.use( ...

  5. PHP基础知识------页面静态化

    1.在开发项目时,有时会遇到一些页面数据量特别大,但是又不经常改变的情况,如商城首页等,这时候就需要进行页面静态化,减轻服务器和数据库的压力. 这里我们先用原生的PHP写一个简单的demo,用来理解页 ...

  6. SQO2008配置管理工具服务显示远程过程调用失败0x800706be

    需要进行删除或更改程序里面,去卸载Microsoft SQL Server 2012 Express LocalDB就可以用了 如果还不可以看,看看是不是还有其它的占用了这个实例名 如: Micros ...

  7. PHP FILTER_SANITIZE_STRING 过滤器

    定义和用法 FILTER_SANITIZE_STRING 过滤器去除或编码不需要的字符. 该过滤器删除那些对应用程序有潜在危害的数据.它用于去除标签以及删除或编码不需要的字符. Name: " ...

  8. mapreduce求共同好友

    逻辑分析 以下是qq的好友列表数据,冒号前是一个用户,冒号后是该用户的所有好友(数据中的好友关系是单向的) A:B,C,D,F,E,O B:A,C,E,K C:F,A,D,I D:A,E,F,L E: ...

  9. AcWing 220.最大公约数 欧拉函数打卡

    题目:https://www.acwing.com/problem/content/222/ 题意:求1-n范围内,gcd(x,y)是素数的对数 思路:首先我们可以针对每个素数p,那么他的贡献应该时  ...

  10. rabbitmq安装-1

    原文地址和下载地址 原方地址: https://www.cnblogs.com/jiagoushi/p/9961388.html rabbitmq下载地址: https://github.com/ra ...