jquery中each用法

本文介绍如何使用jQuery的each方法遍历网页中的表单元素,特别是select和option,通过设置回调函数来获取各个选项的文本内容,并展示如何在不同层次上进行遍历,以及使用$.each方法直接遍历数组和对象。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通用遍历方法,可用于遍历对象和数组。$().each(),回调函数拥有两个参数:

第一个为对象的成员或数组的索引,第二个为对应变量或内容。如需退出each循环可使回调函数返回false


现有如下两个select

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. 计划类别:  
  2. <select id="PLANTYPE">  
  3.     <option value="0">-所有-</option>  
  4.     <option value="1">新建</option>  
  5.     <option value="2">续建</option>  
  6. </select>  
  7. 申报类型:  
  8. <select id="AUDITTYPE">  
  9.     <option value="0">-所有-</option>  
  10.     <option value="1">申报</option>  
  11.     <option value="2">修改</option>  
  12. </select>  
使用each方法获取option中的文本值,即 -所有-、新建、续建...

如果只使用一次each循环 可从option处开始

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. $("option").each(function(index,data){  
  2.     console.info($( data ).text());  
  3.     //或者console.info($(this).text());  
  4. })  

也可从select处开始

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. $("select").each(function( index,data){  
  2.     $("option",  data).each(function(m,n){  
  3.          console.info($(this).text());  
  4.     })  
  5. })  
$("option", data)一定要加上 data或者$("option",this),表示此对象下的option

否则就是所有的option。

--------------------------华丽的分割线-----------------------------

each还有一种用法jQuery.each(object, [callback])
不同于jQuery对象的$().each()方法,此方法可用于例遍任何对象。

用此方法同样遍历上述代码

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. $.each($("option"),function(index,data){  
  2.     console.info(index+" "+data);  
  3. })  

也可以遍历数组

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. $.each( [0,1,2], function(i, n){  
  2.       console.info( "Index:" + i + ": " + n );  
  3. });  

遍历对象

[javascript]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. $.each({ name: "itmyhome", addr: "Beijing" },function(i, n){  
  2.       console.info("Name: " + i + ", Value: " + n);  
  3. });  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值