在做项目时遇到了一个关于遍历的问题,

前提是:在ul中有n个li每个li从后台获取的数据中有一个sign的字段,当sign等于0时(li未被点击过)li会显示一个红点,当sign不等于0时(li已被点击)红点会消失,开始时的代码是这样的

for(var i=0;i<data.length;i++){

  if(data[i].sign==0){

    $api.addCls($api.dom('#mark_red'), 'mark_red');

  }else{

    $api.removeCls($api.dom('#mark_red'), 'mark_red');

  }

}

这段代码看似没错,运行后发现只会显示最后一个的结果,最后一个li的sign=0,显示,不等于零消失,并没有达到自己想要的效果

这是因为循环时并没有保存之前的sign的值,到结束最后一个值会覆盖之前的值,所以只会有最后一个的效果,

解决方法:

首先我先把data里的sign值放入了一个空数组data_read,

var data_read=[];
for(var i=0;i<data.length;i++){
  read=data[i].read;
  data_read.push(read);
}

之后遍历

$("#ul_read li").each(function(){
  index=$(this).index();
  if(data_read[index]==0){
    $(this).find('.mark').css('display','block');
  }else{
    $(this).find('.mark').css('display','none');
  }
})

这样就完美解决了上面的问题,当然肯定还有其他更简便的方法,欢迎批评指正

js 在遍历时只会显示最后一个遍历到的结果的更多相关文章

  1. [转]WordPress“添加媒体”文件时只显示上传到当前文章的附件图片

    使用WordPress的朋友应该都清楚,特别是喜欢图文并茂的网站,肯定离不开的就是WordPress文章编辑页面的“添加媒体”按钮,每次点击就能弹出一个插入多媒体的界面,然后页面默认就会列举加载所有最 ...

  2. HTML input="file" 浏览时只显示指定文件类型 xls、xlsx、csv

    html input="file" 浏览时只显示指定文件类型 xls.xlsx.csv <input id="fileSelect" type=" ...

  3. <input type="file" />浏览时只显示指定文件类型

    <input type="file" />浏览时只显示指定文件类型 <input type="file" accept="appli ...

  4. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

  5. js-页面需展示大量图片时,采用lyz.delayLoading.min.js,图片在屏幕时加载显示

    本文本内容拷贝至:https://blog.csdn.net/xuanwuziyou/article/details/48199123 当一个网页中有大量图片时,浏览器会逐个去下载这些图片,等全部下载 ...

  6. css控制打印时只显示指定区域

      CreateTime--2017年9月26日08:16:04 Author:Marydon css控制打印时只显示指定区域 思路: 1.使用打印命令@media print: 2.控制执行打印命令 ...

  7. Matlab7.1——启动时只显示Logo

    1. 现象 Matlab7.1在启动时只显示Matlab的Logo: 2. 解决方法 听我的吧,这个是官方办法,我也亲自试过了1结束matlab进程:2在C:\user\APPDATA\Roaming ...

  8. jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示

    1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...

  9. 关于js渲染网页时爬取数据的思路和全过程(附源码)

    于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...

随机推荐

  1. getcomputedstyle()获取border像素差异问题

    getComputedStyle()方法返回的是一个CSS样式声明对象--CSSStyleDeclaration对象(与style属性的类型相同),包含当前元素所有最终使用的CSS属性值: <! ...

  2. Linux,activemq-cpp之消息过滤器

    假设过滤器字符串如下: filt1=aaaa filt2=bbbb filt3=cccc activeMQ-cpp中消息过滤器,在发送消息的producer.cpp中,对message进行属性设置,m ...

  3. block的各种定义

    1.作为变量 //block 的申明,定义,调用,block快捷方式inline //<#returnType#>(^<#blockName#>)(<#parameter ...

  4. ES6中的Set和Map集合

    前面的话 在ES6标准制定以前,由于可选的集合类型有限,数组使用的又是数值型索引,因而经常被用于创建队列和栈.如果需要使用非数值型索引,就会用非数组对象创建所需的数据结构,而这就是Set集合与Map集 ...

  5. gitlab和github一起使用

    还是在转我笔记上的内容, 也算备份 参考(https://segmentfault.com/a/1190000002994742) 可以对比着看, 我记得参考里面有个点没有说详细, 我把自己的流程记下 ...

  6. 表达式求值(栈方法/C++语言描述)(一)

    一个算数表达式(以下简称为表达式)由运算数.运算符.左括号和右括号组成,定义一个枚举类型TokenType表示为: typedef enum { BEGIN, NUMBER, OPERATOR, LE ...

  7. NOIP 2014 提高组 题解

    NOIP 2014 提高组 题解 No 1. 生活大爆炸版石头剪刀布 http://www.luogu.org/problem/show?pid=1328 这是道大水题,我都在想怎么会有人错了,没算法 ...

  8. java中创建多线程两种方式以及实现接口的优点

    多线程创建方式有两种 创建线程的第一种方式.继承Thread类 1.继承Thread类 2.重写Thread类中的run方法--目的将自定义代码存储在run方法.让线程执行3.调用线程的start() ...

  9. 使用Visual Studio Code调试基于ActionScript的LayaAir HTML5游戏

    使用Visual Studio Code(VS Code)调试的优势 使用VS Code我们可以极大地提高LayaAir Html5游戏项目的调试效率,VS Code的优势有以下几点: 在发生Java ...

  10. git分支管理之分支管理策略

    分支管理策略 阅读: 246888 通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就 ...