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 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
HTML的select控件美化
Mar 27 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
Element-UI+Vue模式使用总结
Jan 02 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
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
党员公开承诺书和承诺事项
2014/03/25 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
环保建议书200字
2014/05/14 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python