使用jquery中$.each()方法来循环一个数据列表
时间:2019-04-15
本文章向大家介绍使用jquery中$.each()方法来循环一个数据列表,主要包括使用jquery中$.each()方法来循环一个数据列表使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
定义和用法
jQuery.each() 函数用于遍历指定的对象和数组。
语法
$.each( object, callback )
参数 | 描述 |
---|---|
object | Object类型 指定需要遍历的对象或数组。 |
callback | Function类型 指定的用于循环执行的函数。 |
通过这个方法可以将工作中遇到的数据列表如商城里面的商品列表等很好的进行循环,简单方便,下面就是我写的一个案例:
当然这个这个数组对象是我自己模拟的,实际工作中我们只需要根据后台给的接口来进行操作。
html:
<div class="index">
<h1>
首页
</h1>
<ul class="shop_box">
</ul>
<button id="btn">点击</button>
</div>
js:
<script> $(function () { var con = [ { name: '小王', age: 18 }, { name: '小张', age: 19 }, { name: '小李', age: 20 }, { name: '小何', age: 21 }, { name: '小陆', age: 22 }, ] var html = ''; $.each(con, function (k, v) { // 这里的函数参数是键值对的形式,k代表键名,v代表值 html += '<li class="shopBox">' + '<div class="ShopListName">' + con[k].name + '</div>' + '<div class="age">' + con[k].age + '</div>' + '</li>' }); $(".index").append(html); }) </script>
效果图:
- 分布式系统唯一ID生成方案汇总
- 操作系统底层技术——CPU亲和性
- AngularJS例子 ng-repeat遍历输出 通过js的splice方法删除当前行
- mongoDB报错Cannot find module '../build/Release/bson'
- 计算机视觉处理三大任务:分类、定位和检测
- Windows下RabbitMQ安装及入门
- 计算机视觉任务:图像梯度和图像完成
- Yarn【label-based scheduling】实战总结(一)
- 配置sonarqube+maven
- Yarn【label-based scheduling】实战总结(二)
- HDFS学习:HDFS机架感知与副本放置策略
- spring cloud 报错Error creating bean with name 'hystrixCommandAspect' ,解决方案
- Spring Security OAuth2 Demo
- SpringBoot学习:整合shiro(身份认证和权限认证),使用EhCache缓存
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- php array 转json及java 转换 json数据格式操作示例
- Thinkphp5 如何隐藏入口文件index.php(URL重写)
- 在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
- thinkphp5使html5实现动态跳转的例子
- php 自定义函数实现将数据 以excel 表格形式导出示例
- 解决tp5在nginx下修改配置访问的问题
- 在PHP中实现使用Guzzle执行POST和GET请求
- c 语言函数指针之回调函数
- 解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
- php和js实现根据子网掩码和ip计算子网功能示例
- php ZipArchive实现多文件打包下载实例
- PHP 代码简洁之道(小结)
- Thinkphp 在api开发中异常返回依然是html的解决方式
- Laravel 连接(Join)示例
- 解决Laravel自定义类引入和命名空间的问题