jQuery中each()方法用法实例


Posted in Javascript onDecember 27, 2014

本文实例讲述了jQuery中each()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数。

当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的。通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成。
each()方法不同于jQuery.each()方法 。each()方法只能够遍历JQuery对象,而jQuery.each()方法可以遍历任何对象。
语法结构:

$(selector).each(function(index,element))

参数列表:

参数 描述
function(index,element) 每个匹配元素定义运行的方法。 index - 可选。当前上下文元素在匹配元素集合中的索引。 element -可选。当前的元素(也可使用 "this" 选择器)。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>each()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#btn").click(function(){

  $("li").each(function(index,element){

    alert($(element).text())

  })

})

})

</script>

</head>

<body>

<ul>

  <li>后台专区</li>

  <li>前台专区</li>

  <li>数据库专区</li>

  <li>站长专区</li>

</ul>

<button id="btn">点击查看效果</button>

</body>

</html>

以上代码能够便利li元素集合中的每一个元素,然后返回li元素中的文本。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
jQuery.holdReady()方法用法实例
Dec 27 #Javascript
jQuery中的jQuery()方法用法分析
Dec 27 #Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 #Javascript
基于jquery实现发送文章到手机的代码
Dec 26 #Javascript
jQuery中ajax的post()方法用法实例
Dec 26 #Javascript
jQuery中ajax的get()方法用法实例
Dec 26 #Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 #Javascript
You might like
PHP实现用户认证及管理完全源码
2007/03/11 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
vue实现购物车加减
2020/05/30 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python中的各种装饰器详解
2015/04/11 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
python和go语言的区别是什么
2020/07/20 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
大学生求职信范文
2014/05/24 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers