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

前提是:在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. 小程序开发教程:wx.setTopBarText(OBJECT)

    状态信息展示 当小程序被显示在聊天顶部时,开发者可将重要的状态变更信息实时展示出来,便于用户及时获知. 详见文档:小程序文档 小程序更新之后,有个更有用的功能!支持状态栏实时状态更新!! wx.set ...

  2. nyoj_471:好多的树(容斥原理)

    题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=471 还是直接上代码.. #include<bits/stdc++.h> u ...

  3. 解决 CefSharp WPF控件不能使用输入法输入中文的问题(代码已提交到 github)

    首先,本文所有 代码已经提交到github,需要的可以直接从github获取:https://github.com/starts2000/CefSharp,希望可以帮助到有需要的朋友们. CEF 简介 ...

  4. 简单聊聊不可或缺的Nginx反向代理服务器--实现负载均衡【上篇】

    今天又是新的一周,我养足了精神去对待新一周的工作,但是今天到公司发现还是有一点空闲时间的,所以就想与之前接触过的Nginx再交往得更深一点儿. 什么是Nginx: Nginx是一款高性能的http服务 ...

  5. Android Studio中添加SlidingMenu

    SlidingMenu是github上面的一个开源库,地址:https://github.com/jfeinstein10/SlidingMenu.git 第一步:先下载: 第二步:添加到as中: 1 ...

  6. Python中的re模块--正则表达式

    Python中的re模块--正则表达式 使用match从字符串开头匹配 以匹配国内手机号为例,通常手机号为11位,以1开头.大概是这样13509094747,(这个号码是我随便写的,请不要拨打),我们 ...

  7. 如何在Linux上使用VIM进行.Net Core开发

    对于在Linux上开发.Net Core的程序员来说, 似乎都缺少一个好的IDE. Windows上有Visual Studio, Mac上有Visual Studio for Mac, 难道Linu ...

  8. metasploit快速入门

    今天没上班,在小黑屋里看了一个一百多页的书<metasploit新手指南>,在此将笔记分享给大家.欢迎大家批评指正,共同学习进步.     metasploit新手指南 笔记 kali 0 ...

  9. gitlab+jenkins持续集成(一)

    1. 环境:CentOS7.0,jdk-8u91-linux-x64.rpm,jenkins 2.7.4 ,gitlab 9.2.2 2.    安装jdk,jenkins     (rpm -ivh ...

  10. CSDN社区投诉申请表

    最近两天我发现我的个人网站,业余草:www.xttblog.com,流量急速下滑.经过分析,发现是被CSDN社区的一个博客网友将我网站上的内容搬到了他的CSDN博客上.导致了已搜索就全部导流到了CSD ...