<!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. Kotlin的密封（Sealed）类：超强的枚举（KAD 28）

    作者:Antonio Leiva 时间:Jun 27, 2017 原文链接:https://antonioleiva.com/sealed-classes-kotlin/ Kotlin的封装类是Jav ...

  2. python操作字符串内容并重新输出

    今天在做一个函数的作业,题目如下: 编写一个函数实现大写转小写,小写变大写,并且转换为镜像字符串,并且将字符串变为镜像字符串. 例如:’A’变为’Z’,’b’变为’y 示范字符串: ”sdSdsfdA ...

  3. 关于axios跨域带cookie

    axios  设置 withCredentials :true $u = $_SERVER['HTTP_REFERER'];$u = preg_replace('#/$#', '', $u);head ...

  4. TW实习日记：第17天

    今天又改了一堆bug,比如界面的显示bug,Html字符串的处理.优化了一些交互界面,处理了一个模块数据传输的问题.我发现这些bug真的有一半是粗心导致的,真的真的是,写代码一定要细心细心再细心,不然 ...

  5. JVM--内存模型与线程

    一.硬件与效率的一致性 计算机的存储设备与处理器的运算速度存在几个数量级的差距,现在计算机系统不得不在内存和处理器之间增加一层高速缓存(cache)来作为缓冲.将运算需要的数据复制到缓存中,让运算能够 ...

  6. Java学习 · 初识 面向对象深入二

    面向对象深入 1.            抽象类 a)     声明 i.           抽象方法和抽象类必须用abstract来修饰 ii.           没有方法体,不需要实现 b)  ...

  7. HDU 1394Minimum Inversion Number

    The inversion number of a given number sequence a1, a2, ..., an is the number of pairs (ai, aj) that ...

  8. OpenMPI 集群配置

    现在有2台机器,希望可以尝试一下在多台机器上跑MPI的感觉,所以跑之前就得配置,先参考网址: https://www.cnblogs.com/awy-blog/p/3402949.html: 1. 配 ...

  9. idea clion编译器

    RNMV64P0LA-eyJsaWNlbnNlSWQiOiJSTk1WNjRQMExBIiwibGljZW5zZWVOYW1lIjoiY24gdHUiLCJhc3NpZ25lZU5hbWUiOiIiL ...

  10. 在JS中 实现不用中间变量temp 实现两个变量值得交换

    1.使用加减法; var a=1; var b=2; a=a+b; b=a-b; a=a-b; 2.使用乘除法(乘除法更像是加减法向乘除运算的映射) var a=1; var b=2; a = a * ...