码迷,mamicode.com
首页 > 编程语言 > 详细

$.each遍历数组

时间:2016-11-26 14:46:00      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:data   span   one   type   json   meta   bst   doctype   title   

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

 

$.each遍历数组

标签:data   span   one   type   json   meta   bst   doctype   title   

原文地址:http://www.cnblogs.com/yizhilin/p/6104025.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!