欢迎光临新密市黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

jquery中常用的循环遍历数据的方法。

时间:2021-06-11   来源:新密市网站建设
jquery里面的循环的用法
下面提一下jQuery的each方法的几种常用的用法
Js代码
 var arr = [ "one", "two", "three", "four"];     
 $.each(arr, function(){     
    alert(this);     
 });     
//上面这个each输出的结果分别为:one,two,three,four
    var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]     
$.each(arr1, function(i, item){     
   alert(item[0]);     
});     
//其实arr1为一个二维数组,item相当于取每一个一维数组,   
//item[0]相对于取每一个一维数组里的弟一个值   
//所以上面这个each输出分别为:1   4   7
  var obj = { one:1, two:2, three:3, four:4};     
$.each(obj, function(key, val) {     
    alert(obj[key]);           
});   
//这个each就有更厉害了,能循环每一个属性     
//输出结果为:1   2  3  4
 <script type="text/javascript">
    $(function(){
        var con=[
            {
                "image1":"img/1524880084962.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879960117.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879605807.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            },
            {
                "image1":"img/1524879181488.jpg",
                "shopName":"黑花生(100g*15袋/盒)",
                "price":190,
                "markPrice":200
            }
            
        ]
        var html="";
        $.each(con, function(k,v) {//这里的函数参数是键值对的形式,k代表键名,v代表值
            html+='<li class="shopBox">'+
                    '<div class="shopImg"><img src='+con[k].image1+'/></div>'+
                    '<div class="shopListName">'+con[k].shopName+'</div>'+
                    '<div class="shopPrice">'+
                        '<span class="price">¥'+con[k].price+'</span>'+
                        '<span class="marketPrice">¥'+con[k].markPrice+'</span>'+
                    '</div>'+
                '</li>'
        });
        $(".shop_box").append(html);
    })
</script>



 
<script>
 
    var a = {
        "sys_bb": [
        {
            "menu_name": "教务处",
            "menus": [
                {
                    "menu_name": "张明"
                },
                {
                    "menu_name": "王明"
                }
            ]
        },
        {
            "menu_name": "办公室",
            "menus": [
                {
                    "menu_name": "刘处"
                },
                {
                    "menu_name": "小王"
                },
                {
                    "menu_name": "张三"
                }
            ]
        }
    ],
        "sys_cw": [
        {
            "menu_name": "财务处",
            "menus": [
                {
                    "menu_name": "王虎"
                }
            ]
        }
    ]
    };
 
    $(function () {
 
        $.each(a.sys_bb, function (i, n) {
 
            $("#Div").append(a.sys_bb[i].menu_name + "<br>");
            $.each(a.sys_bb[i].menus, function (i, n) {
 
                $("#Div").append("  " + n.menu_name + "<br>");
            });
 
        });
 
        $.each(a.sys_cw, function (i, n) {
 
            $("#Div").append(a.sys_cw[i].menu_name + "<br>");
            $.each(a.sys_cw[i].menus, function (i, n) {
 
                $("#Div").append("  " + n.menu_name + "<br>")
            });
 
        });
    });
</script>


本文标签:
新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

jq控制视频播放和暂停以及声音
jq控制视频播放和暂停以及声音

在网站开发的过程中,我们常常需要添加一些视频来让网站内容更加丰富,比如说网页中有一个按钮,点击按钮后...

PBOOTCMS图片水印不支持jpeg格式怎么处理?
PBOOTCMS图片水印不支持jpeg格式怎么处理?

在使用PBOOT的时候,我们发现在后台开启了上传图片时给图片打上水印的功能,但是客户在上传图片的时候始终打...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top