jq的$.each遍历数组

2016-11-28 20:42:09来源:cnblogs.com作者:云悠人点击

第七城市
<!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>

 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台