对li列表相同的项进行标红

ETL流
• 阅读 714

假定一个dom结构是一个id为foo的容器ul下有多个li的列表,在li中有一个输入框。

当输入框输入事件触发的时候调用equalHighlight,unitList_new是传入的当前列表的对象数组(列表通过unitList_new渲染出来,并确保unitList_new与li中的数据顺序一致):

(function(w){
       w.equalHighlight = function (unitList_new) {
          $("#foo > li").removeClass("red");
          for (var j = 0; j < unitList_new.length; j++) {
            for (var k = j + 1; k < unitList_new.length; k++) {
              if (
                unitList_new[j].sort === unitList_new[k].sort &&
                unitList_new[k].sort !== ""
              ) {
                if (!$("#foo > li").eq(k).hasClass("red")) {
                  $("#foo > li").eq(k).addClass("red");
                }
                if (!$("#foo > li").eq(j).hasClass("red")) {
                  $("#foo > li").eq(j).addClass("red");
                }
              }
            }
          }
        };
      })(window)

逐个比对数组的sort值是否相同并给对应的li加红色class:

  .red{
    color: red;
      }
  .red input{
      color: red;
    }
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
4年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Wesley13 Wesley13
4年前
java中实现对list的模糊查询
比如我有下面这样一个List,里面存放的是多个Employee对象。然后我想对这个List进行按照Employee对象的名字进行模糊查询。有什么好的解决方案么?比如我输入的查询条件为“wang”,那么应该返回只包含employee1的List列表。ListlistnewArrayList();Employeeemplo
CuterCorley CuterCorley
4年前
商业数据分析从入门到入职(7)Python基础数据结构及其操作
一、列表之前的数据类型一般都是单个值,而不能再存储像矩阵、数组这种结构存储多个元素,要是需要达到这样的目标、需要使用新的数据类型,Python中提供了4种数据结构来存储多个对象,称它们为容器类型(ContainerTypes),包括如下几种类型:列表List元组Tuple字典Dictionary集合Set1.创建列表其实,
Stella981 Stella981
4年前
Python 画图
使用python的科学计算库,达到快速计算的效果。标准的Python中用列表(list)保存一组值,可以当作数组使用。但由于列表的元素可以是任何对象,因此列表中保存的是对象的指针。这样一来,为了保存一个简单的列表\1,2,3\,就需要有三个指针和三个整数对象。对于数值运算来说,这种结构显然比较浪费内存和CPU计算时间。使用numpy的a
Stella981 Stella981
4年前
JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value:1\.$("select\_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发2\.varcheckText$("select\_id").find("option:selected").text();  
Stella981 Stella981
4年前
ConcurrentQueue队列的基本使用方式
 队列(Queue)代表了一个先进先出的对象集合。当您需要对各项进行先进先出的访问时,则使用队列。当您在列表中添加一项,称为入队,当您从列表中移除一项时,称为出队。  ConcurrentQueue<T队列是一个高效的线程安全的队列,是.NetFramework4.0,System.Collections.Concurren
Stella981 Stella981
4年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
4年前
JavaScript DOM编程艺术(第2版)学习笔记2(4~6章应用实例)
本书的第4章使用第3章学到的操作DOM的方法和属性写了一个展示图片的网页,并在第5,6章对代码进行了优化。第一版,搭建网页的静态结构,包括一级标题<h1,无序列表清单<ul,每个列表<li中又包括了链接<a,当点击列表文字时会显示链接所指向的图片,这属于浏览器的默认行为。代码如下:<!DOCTYPEhtml<ht
Wesley13 Wesley13
4年前
Java中方法的重载与覆盖(随笔01)
方法重载(Overlord)。方法重载:指在同一个类中,允许在一个以上的同名方法,只要它们的参数列表不同即可,与修饰符和返回值类型无关(例如:构造方法重载)。。参数列表:个数不同,数据类型不同,顺序不同;。重载方法调用:JVM通过方法的参数列表,调用不同的方法。!(https://oscimg.oschina.net/oscnet/0
五、飞鹅官网API接口文档
接口列表1.获取网站信息请求方法:GET请求URL:/api/site/getSiteInfo请求参数无返回结果json"code":1,"data":"id":1,//id"title":"SampleSiteName",//网站名称"intro":"T
布局王 布局王
8个月前
鸿蒙Next仓颉语言开发实战教程:聊天列表
昨天分享了消息列表页面,今天继续分享聊天页面的开发过程:这个页面又是常见的上中下布局,从上至下依次为导航栏、聊天列表和输入框工具栏,我们可以先写一下简单的结构,最上面导航栏是横向布局,所以写个Row容器,中间是List,底部仍然是Row容器,导航栏和底部输
ETL流
ETL流
Lv1
蝴蝶不传千里梦,子规叫断三更月。
文章
3
粉丝
0
获赞
0