jQuery中each遍历的三种方法实例分析


Posted in jQuery onSeptember 07, 2018

本文实例讲述了jQuery中each遍历的三种方法。分享给大家供大家参考,具体如下:

1、选择器+遍历

$('div').each(function (i){
  //i就是索引值
  //this 表示获取遍历每一个dom对象
});

2、选择器+遍历

$('div').each(function (index,domEle){
  //index就是索引值
  //domEle 表示获取遍历每一个dom对象
});

3、更适用的遍历方法

1)先获取某个集合对象

2)遍历集合对象的每一个元素

var d=$("div");
$.each(d,function (index,domEle){
 //d是要遍历的集合
 //index就是索引值
 //domEle 表示获取遍历每一个dom对
});

案例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com 属性选择器学习</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
//<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可见的文本域的值 $('input[type=text]:enabled')" />
$("#btn0").click(function (){
//当点击按钮后,设置id=two的div的背景颜色是绿色
$("input[type=text]:enabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值 $('input[type=text]:disabled')" />
$("#btn1").click(function (){
//当点击按钮后,设置id=two的div的背景颜色是绿色
$("input[type=text]:disabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" />
$("#btn2").click(function (){
//当点击按钮后,设置id=two的div的背景颜色是绿色
alert($("input[type=checkbox]:checked").length);
/*
$("input[type=checkbox]:checked").each(function(index,domEle){
//alert(domEle.value);
//alert(this.value);
//alert($(this).val());
});
*/
});
//<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容 $('select option:selected')" />
$("#btn3").click(function (){
//当点击按钮后,设置id=two的div的背景颜色是绿色
$("select option:selected").each(function(index,domEle){
//domEle.value="xxxxx";
alert($(domEle).text());
});
});
});
</script>
</head>
<body>
<form method="post" action="">
<input type="text" value="可见元素1" />
<input type="text" value="不可见元素1" disabled="disabled" />
<input type="text" value="可见元素2" />
<input type="text" value="不可见元素2" disabled="disabled" /><br>
<input type="checkbox" value="美女" />美女
<input type="checkbox" value="美男" />美男
<input type="checkbox" value="大爷" />大爷
<input type="checkbox" value="大妈" />大妈
<br>
<input type="radio" value="男" />男
<input type="radio" value="女" />女
<br>
<select id="zhiwei" size="5" multiple="multiple">
  <option>PHP开发工程师</option>
  <option>数据库管理员</option>
  <option>系统分析师</option>
  <option>保安</option>
</select>
<select id="xueli">
  <option>大专</option>
  <option>中专</option>
  <option>小学</option>
</select>
</form>
<div style="clear:both;">
<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可修改的文本域的值 $('input[type=text]:enabled')" /><br>
<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值 $('input[type=text]:disabled')" /><br>
<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" /><br>
<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容 $('select option:selected')" /><br>
</div>
</body>
</html>

运行结果:

jQuery中each遍历的三种方法实例分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery操作DOM节点方法总结》、《jQuery遍历算法与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

jQuery 相关文章推荐
jquery仿微信聊天界面
May 06 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
jQuery滑动效果实现方法分析
Sep 05 #jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
You might like
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PDO::exec讲解
2019/01/28 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
jquery $.each()使用探讨
2013/09/23 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
canvas实现钟表效果
2017/02/13 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
js实现星星打分效果
2020/07/05 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
Django Highcharts制作图表
2016/08/27 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
函授毕业生自我鉴定
2013/11/06 职场文书
园林资料员岗位职责
2013/12/30 职场文书
护士辞职信模板
2014/01/20 职场文书
专家推荐信模板
2014/05/09 职场文书
小区文明倡议书
2014/05/16 职场文书
环境日宣传活动总结
2014/07/09 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
承诺书范本大全
2015/05/04 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android