<!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. katalon系列五：使用Katalon Studio手动编写WEB自动化脚本

    上一篇主要讲了怎么录制脚本,这次我们看看怎么手动编写脚本,接下来就编写一个简单的用百度搜索的脚本. 1.我们先抓取页面上的元素,点击工具栏上的Spy Web按钮(地球上有个绿点),URL输入百度地址, ...

  2. div布局方案整理

    实际项目开发过程中遇到页面 DIV 左右布局的需求:左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面,由此引申出本文的几种解决方案 1 左侧 DIV 设置 float 属性为 left ...

  3. 第三模块：面向对象&网络编程基础 第4章 FTP项目作业讲解

    01-FTP项目需求 02-FTP项目框架搭建 03-FTP项目用户认证 04--FTP项目制定标准定长消息头 05-FTP项目下载功能开发 06-FTP项目下载功能开发2 07-FTP项目ls文件列 ...

  4. 389. Valid Sudoku【LintCode java】

    Description Determine whether a Sudoku is valid. The Sudoku board could be partially filled, where e ...

  5. MySQL数据库怎么截取字符串？

    函数: 1.从左开始截取字符串 left(str, length) 说明:left(被截取字段,截取长度) 例:select left(content,200) as abstract from my ...

  6. 【zabbix 监控】第二章 安装测试被监控主机

    客户端安装测试 一.准备两台被监控主机,分别做如下操作: web129:192.168.19.129 web130:192.168.19.130 [root@web129 ~]#yum -y inst ...

  7. ServiceStack.Ormlit　使用Insert的时候自增列不会被赋值

    Insert签名是这样的,将第2个参数设置为true就会返回刚插入的自增列ID了,然后可以手工赋值到对象上面去 public static long Insert<T>(this IDbC ...

  8. 【转载】图解Java常用数据结构(一)

    图解Java常用数据结构(一)  作者:大道方圆 原文:https://www.cnblogs.com/xdecode/p/9321848.html 最近在整理数据结构方面的知识, 系统化看了下Jav ...

  9. 自测之Lesson11：消息和消息队列

    题目:key及ftok函数的作用. 解答: key是用来创建消息队列的一个参数,当两个key相同时,创建消息队列会引起“误会”(除非有意为之).所以我们可以通过ftok函数来获得一个“不易重复”的ke ...

  10. jQuery对象和DOM对象使用说明

    1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传 ...