<!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. Python安装教程最新版

    Python安装教程最新版 目前Python官网已经更新到了最新版Python 3.7.1, 相比Python 2系列,它的兼容性不是太好, 不过应该会在不久的将来会全面解决.它的安装比较容易,具体步 ...

  2. C++11 type_traits 之is_same源码分析

    请看源码: template<typename _Tp, _Tp __v> struct integral_constant { static const _Tp value = __v; ...

  3. 参数为json格式的接口

    1.参数为json格式,需要添加一个header信息web_add_header("Content-type", "application/json"); 2. ...

  4. 返回json数组的GET接口

    Action() { web_reg_find("Search=Body", "SaveCount=find_cnt", "Text=code\&qu ...

  5. CSP201409-2：画图

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  6. HADOOP docker(六):hive简易使用指南

    前言1.hive简介1.1 hive组件与相应功能:1.2 hive的表类型1.3 分区表1.3 分隔符1.4 hive的数据存储2.数据类型2.1 基本数据类型2.1 复杂数据类型2.3 NULL3 ...

  7. [leetcode-753-Open the Lock]

    You have a lock in front of you with 4 circular wheels. Each wheel has 10 slots: '0', '1', '2', '3', ...

  8. 软工2017团队协作第七周——个人PSP

    10.27 --11.2本周例行报告 1.PSP(personal software process )个人软件过程. 类型 任务 开始时间                结束时间 中断时间 实际用时 ...

  9. 20145214实验二 Java面向对象程序设计

    20145214实验二 Java面向对象程序设计 初步掌握单元测试和TDD 三种代码 伪代码 `百分制转五分制:` `如果成绩小于60,转成"不及格"` `如果成绩在60与70之间 ...

  10. 一个例子说明mouseover事件与mouseenter事件的区别

    <html> <head> <meta charset="UTF-8"> <title>haha</title> < ...