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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
原生js实现选项卡功能
Mar 08 Javascript
layui导航栏实现代码
May 19 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
js实现移动端轮播图滑动切换
Dec 21 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
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
简单的js分页脚本
2009/05/21 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python编写俄罗斯方块
2020/03/13 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Keras实现DenseNet结构操作
2020/07/06 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
Shell编程面试题
2012/05/30 面试题
中文专业毕业生自荐信
2014/05/24 职场文书
老人节标语大全
2014/10/08 职场文书
男方婚前保证书
2015/02/28 职场文书
详解Python requests模块
2021/06/21 Python