<!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. Unity编辑器 - 资源批处理工具基类

    Unity编辑器 - 资源批处理工具基类 经常要对资源进行批处理,很多时候都是一次性的需求,于是弄个通用脚本. 工具是个弹出面板,处理过程有进度条,如下: 如图,子类只需要重写几个方法: using ...

  2. spark提交任务的两种的方法

    在学习Spark过程中,资料中介绍的提交Spark Job的方式主要有两种(我所知道的): 第一种: 通过命令行的方式提交Job,使用spark 自带的spark-submit工具提交,官网和大多数参 ...

  3. UML类图(Class Diagram)中类与类之间的关系及表示方式(转)

    源地址:https://blog.csdn.net/a19881029/article/details/8957441 ======================================== ...

  4. 【Machine Learning】如何处理机器学习中的非均衡数据集？

    在机器学习中,我们常常会遇到不均衡的数据集.比如癌症数据集中,癌症样本的数量可能远少于非癌症样本的数量:在银行的信用数据集中,按期还款的客户数量可能远大于违约客户的样本数量.   比如非常有名的德国信 ...

  5. sqlserver 2008 merger语句

    Merge关键字是一个神奇的DML关键字.它在SQL Server 2008被引入,它能将Insert,Update,Delete简单的并为一句.MSDN对于Merge的解释非常的短小精悍:”根据与源 ...

  6. Java学习个人备忘录之关键字final

    final关键字final可以修饰类,方法,变量.final修饰的类不可以被继承final修饰的方法不可以被覆盖final修饰的变量是一个常量.只能被赋值一次.内部类只能访问被final修饰的局部变量 ...

  7. 20172330 2017-2018-1 《Java程序设计》第三周学习总结

    20172330 2017-2018-1 <Java程序设计>第三周学习总结 教材学习内容总结 这一章的主要内容是关于类与对象,通过对String类,Random类,Math类等一系列道德 ...

  8. 由作业题引发对C++引用的一些思考

    首先分析一段代码: #include <bits/c++config.h> #include <ostream> #include <iostream> #incl ...

  9. ubuntu上的inpack测试

    测试linpack 配置 配置linpack环境是整个过程中最麻烦的,也可能是因为我在配置的过程中出现了很多小问题吧.大概有3天的时间除了上课就在配置环境. 问题 总结起来问题和解决方法有这些 1.路 ...

  10. 内存转储文件调试系统崩溃bug

    百度百科:内存转储文件 内存转储是用于系统崩溃时,将内存中的数据转储保存在转储文件中,供给有关人员进行排错分析用途.而它所保存生成的文件就叫做内存转储文件. 内存转储文件也被称作虚拟内存,它是用硬盘里 ...