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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 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
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
PHP之header函数详解
2021/03/02 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
python获取网页状态码示例
2014/03/30 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
python 生成器需注意的小问题
2020/09/29 Python
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
客服文员岗位职责
2013/11/29 职场文书
《木笛》教学反思
2014/03/01 职场文书
业务员简历自我评价
2014/03/06 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
公民授权委托书范本
2014/09/17 职场文书
九九重阳节标语
2014/10/07 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
公司感谢信范文
2015/01/22 职场文书
开会通知短信大全
2015/04/20 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
初中政治教师教学反思
2016/02/23 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书