使用jquery中$.each()方法来循环一个数据列表

快来打我* 2022-05-15 01:51 447阅读 0赞

--------------------

## 定义和用法 ##

jQuery.each() 函数用于遍历指定的对象和数组。

--------------------

## 语法 ##

*$*.each( object, callback )

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><em>object</em></td> 
   <td>Object类型 指定需要遍历的对象或数组。</td> 
  </tr> 
  <tr> 
   <td><em>callback</em></td> 
   <td>Function类型 指定的用于循环执行的函数。</td> 
  </tr> 
 </tbody> 
</table>

通过这个方法可以将工作中遇到的数据列表如商城里面的商品列表等很好的进行循环，简单方便，下面就是我写的一个案例：

当然这个这个数组对象是我自己模拟的，实际工作中我们只需要根据后台给的接口来进行操作。

html:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>商品列表</title>
            <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
            <meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no" />
            <meta name="apple-mobile-web-app-status-bar-style" content="black">
            <link rel="stylesheet" type="text/css" href="css/common.css"/>
            <link rel="stylesheet" type="text/css" href="css/index.css"/>
        </head>
        <body>
            <div id="active">
                <ul class="shop_box">
                    
                </ul>
            </div>
        </body>
    </html>

js:

<script type="text/javascript" src="js/jquery.min.js"></script>
    <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>

效果图：  
![70][]

[70]: /images/20220515/b36b5eac38e148d9b84dbcdc5d5de8af.png

发表评论取消回复

表情：

评论列表（有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery拼接数据循环一个数据列表

但从后端请求过来json数据之后，需要把数据做成循环列表，那么，怎么jquery拼接数据循环一个数据列表？现在写一个简单的demo，效果如下所示： ![641e9bb724

系统管理员/ 2022年12月05日 10:21/ 0 赞/ 166 阅读

相关 JQuery中each循环的跳出

1.jquery 有些朋友可能会以为在jquery跳出循环可以直接使用continue和break了，但是使用之后没有效果，因为在jquery中没有这两条命令。后来上网查了

痛定思痛。/ 2022年10月01日 04:50/ 0 赞/ 234 阅读

相关 Jquery跳出each循环

jQuery中each类似于javascript的for循环但不同于for循环的是在each里面不能使用break结束循环，也不能使用continue来结束本次循环，想

亦凉/ 2022年07月12日 03:29/ 0 赞/ 250 阅读

相关 Jquery跳出each循环

jQuery中each类似于javascript的for循环但不同于for循环的是在each里面不能使用break结束循环，也不能使用continue来结束本次循环，想

小灰灰/ 2022年07月12日 03:29/ 0 赞/ 285 阅读

相关 JQuery跳出each循环的方法

0. 前言也许我们通过 jquery 的循环方法进行数组遍历，但是当不符合条件时，怎么跳出当前循环？（即用each方法内，当不满足条件时想break跳出循环体，想conti

水深无声/ 2022年06月02日 09:22/ 0 赞/ 233 阅读

相关 jquery $.each()循环退出

\[javascript\] [view plain][] [copy][view plain] 1. $(function()\{ 2.

古城微笑少年丶/ 2022年05月27日 01:09/ 0 赞/ 256 阅读

相关使用jquery中$.each()方法来循环一个数据列表

-------------------- 定义和用法 jQuery.each() 函数用于遍历指定的对象和数组。 --------------------

快来打我*/ 2022年05月15日 01:51/ 0 赞/ 448 阅读

相关使用jquery中$.each()方法循环显示购物车中店铺名称及店铺下所对应的商品列表

效果图如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

刺骨的言语ヽ痛彻心扉/ 2022年03月28日 11:42/ 0 赞/ 140 阅读

相关 jQuery each() 方法

概述： jQuery中的 each 函数很方便,`$.each ()`函数封装了十分强大的遍历功能，它可以遍历一维数组、多维数组、DOM ，JSON 等等。 `$.ea

￡神魔★判官ぃ/ 2021年09月13日 23:22/ 0 赞/ 470 阅读

相关 JQuery中的each()方法和$.each()函数的使用

1、each()方法的使用 JQuery提供了 each() 方法用于遍历匹配的元素信息。以每一个匹配的元素作为上下文来执行一个函数。每次执行传递进来的函数时，函数中的

Myth丶恋晨/ 2021年08月31日 14:29/ 0 赞/ 446 阅读