<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>$.each遍历数组</title>

    <style type="text/css">

        *{ margin: 0;padding: 0; }

        p{ width: 300px;height: 30px;text-align: center; }

        div{ width: 300px;height: 30px;text-align: center; }

    </style>

</head>

<body>

    <!-- 第1种 -->

    <p class="five" data-fal="0">11</p>

    <p class="five" data-fal="0">1</p>

    <p class="five" data-fal="0">22</p>

    <p class="five" data-fal="0">22</p>

    <p class="five" data-fal="0">22</p>

    <p class="five" data-fal="0">22</p>

    <!-- 第2种 -->

    <div class="one" data="1">标签1</div>

    <div class="one" data="2">标签2</div>

    <div class="one" data="3">标签3</div>

    <div class="one" data="4">标签4</div>

    <div class="one" data="5">标签5</div>

    <div class="one" data="6">标签6</div>

    <div class="one" data="7">标签7</div>

    <div class="one" data="8">标签8</div>

    <div class="one" data="9">标签9</div>

    <div class="one" data="10">标签1</div>

    <div class="one" data="20">标签20</div>

    <div class="one" data="38">标签38</div>

    <div class="one" data="59">标签59</div>

</body>

<script src="jquery-1.11.1.min.js"></script>

<script>

    // $.each用来遍历数组，解析数据

    // 第1种 $.each遍历数组 把数组的内容value 当下标用

    var arr1=[1,2,5];

        // index是下标，value是数组内容

    $.each(arr1,function(index,value){

        $('.five').eq(value).attr('data-fal',1).css("background","blue");

    });

    // 第2种 模拟数据(字符串)，通过数据给 带有data属性改样式

    var str= 'FFFE030,2,3,4,6,7,8,10,20,22,26,38,39,40,41,59,62,66,68';

    var str2 = str.substring(6);

    var arr = str2.split(',');

    $.each(arr,function (index,value){

        if( value>=4 && value<=9){

                //1

            $("[data="+value+"]").css("background","red");

        }

        else if( value>=16 && value<=33){

                // 2

                $("[data="+value+"]").css("background","rgba(45,53,69,0.6)");

            }

            else if(value>=38 && value<=55) {

                // 3

                $("[data="+value+"]").css("background","#fe4365");

            }

            else if ( value >=59) {

                // 4

                $("[data="+value+"]").css("color","rgb(255, 111, 87)");

            }

        });

    // 第三种 遍历数组

    var arr2= [5,6,8,10];

    $.each(arr2,function(index,value){

        console.log("下标:"+index+"值:"+value);

    });

    // 遍历对象

    var json ={ name:"王",age:"20",sex:"女"};

    $.each(json,function(index,value){

        console.log("名称:"+index+"内容:"+value);

    })

    </script>

    </html>

jq的$.each遍历数组的更多相关文章

  1. *使用while循环遍历数组创建索引和自增索引值

    package com.chongrui.test;/* *使用while循环遍历数组 *  *  * */public class test {    public static void main ...

  2. nodejs 遍历数组的两种方法

    var array = [1,2,3]; array.forEach(function(v,i,a){ console.log(v); console.log(i); console.log(a); ...

  3. 原生js使用forEach()与jquery使用each遍历数组，return false 的区别

    原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.e ...

  4. js中数组遍历for与for in区别(强烈建议不要使用for in遍历数组)

    js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //for ...

  5. 以forin的方式遍历数组时进行删除操作的注意点

    今天在修改某项需求的时候,需要在遍历的时候将匹配项移除掉,采用的时forin的方式遍历,然后运行的时候却crash掉了 for (NSString*str in self.btnArray) { if ...

  6. 使用for循环遍历数组

    package review20140419;/* * 遍历数组 */public abstract class Test1 {    //程序入口    public static void mai ...

  7. php 中遍历数组时使用引用出现的问题

    今天在使用foreach遍历数组时发现,当使用&时会出现问题: $arr = array( array('id' => 100, 'error'=> 'aa'), array('i ...

  8. Java：JSTL遍历数组，List，Set，Map

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. js遍历数组的错误方法

    for (var index in myArray) { // don't actually do this console.log(myArray[index]); } 缺点: 数组的索引值inde ...

随机推荐

  1. jmeter基础之录制篇

    一.前言 jmeter如今被越来越多人喜爱的一款测试工具,相比于loadrunner它体积特轻便.jmeter不仅用来做单接口测试,压测还能做性能,主要是一款开源的,可以写一个你需要的插件功能再添加里 ...

  2. Android Test和Logcat

    一 测试相关概念 是否有源码 黑盒测试: 测试工具 白盒测试: 对所有的源码特别熟悉 对特定的代码进行测试 都是编程 时间 单元测试(程序员) 模块测试 集成测试 系统测试 回归测试(改bug) 压力 ...

  3. 第4章 TCP/IP通信案例:访问Internet上的Web服务器

    第4章 TCP/IP通信案例:访问Internet上的Web服务器 4.2 部署代理服务器 书中为了演示访问Internet上的Web服务器的全过程,使用了squid代理服务器程序模拟了一个代理服务器 ...

  4. Ubuntu—截屏与截取选定区域

    截屏:PrScrn(打印键) 截取选定区域:shift + PrScrn(打印键) # 截取选定区域时,先按下组合键后,鼠标的形状就会变成十字架形状,这时候再截取想要截取的区域就可以了-

  5. Docker容器的搭建

    Docker容器的搭建 一.先从Docker Hub上面拉取一个基础镜像 命令:docker pull ubuntu 命令说明:pull:拉取镜像的命令,ubuntu:拉取镜像的名称 扩展命令: 命令 ...

  6. 一：yarn 介绍

        yarn的了出现主要是为了拆分jobtracker的两个核心功能:资源管理和任务监控,分别对应resouceManager(RM)和applicationManager(AM).yarn中的任 ...

  7. cp的使用

    一.形式 cp [options] source1 source2 source3 .... directory 参数意义: 参数 意义 -i 当目标文件已存在时,会询问是否覆盖 -p 连同文件的属性 ...

  8. C语言实训——扑克牌洗牌程序

    说明此程序本来是21点扑克程序的一个被调函数,在这里我单独将它拿出来作为一个小程序. #include<stdio.h> #include<time.h> #include&l ...

  9. lintcode-176-图中两个点之间的路线

    176-图中两个点之间的路线 给出一张有向图,设计一个算法判断两个点 s 与 t 之间是否存在路线. 样例 如下图: for s = B and t = E, return true for s = ...

  10. TCP系列27—窗口管理&流控—1、概述

    在前面的内容中我们依次介绍了TCP的连接建立和终止过程和TCP的各种重传方式.接着我们在这部分首先关注交互式应用TCP连接相关内容如延迟ACK.Nagle算法.Cork算法等,接着我们引入流控机制(f ...