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