<!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>
