Jquery中each的三种遍历方法

原创 2012年03月28日 19:33:51

 

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>属性选择器学习</title>

<script language="javascript" type="text/javascript" src="../include/jquery.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=twodiv的背景颜色是绿色

$("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=twodiv的背景颜色是绿色

$("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=twodiv的背景颜色是绿色

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=twodiv的背景颜色是绿色

$("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的三种遍历方法

1、选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2、选择器+遍历 $('div').each(fun...
  • luman1991
  • luman1991
  • 2017年01月10日 17:58
  • 2022

jquery each--find

each--find $(document).ready(function() { // $("ul").find("li").each(function(i) { $("#order...
  • hjingtao
  • hjingtao
  • 2012年03月19日 21:29
  • 3947

实现jQuery.each方法

参考JavaScript专题之jQuery通用遍历方法each的实现 $.each是一个通用的迭代函数,可以用来迭代数组与对象。$.each(arr,function(index,value){ ...
  • crystal6918
  • crystal6918
  • 2017年08月12日 21:25
  • 289

jquery的each()详细介绍

1 遍历数组 (1)一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ ...
  • u012871207
  • u012871207
  • 2016年05月27日 17:10
  • 150

jquery 遍历集合

1、each() $.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是遍历的index,第二个是当前遍历的值。...
  • guorun18
  • guorun18
  • 2015年10月10日 11:39
  • 8145

关于Jquery 获取表单FORM所有元素进行AJAX提交

前提交代: 获取 表单FROM所有的元素可以采用var a = $('#form_id').serializeArray() 进行获取; var form_data = $.serializeArra...
  • winxsm
  • winxsm
  • 2016年12月25日 12:31
  • 9959

jquery的each遍历

jQuery 遍历函数 jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。 函数 描述 .add() 将元素添加到匹配元素的集合中。 ...
  • maxu12345
  • maxu12345
  • 2015年07月28日 11:27
  • 401

jQuery.each-v1.10.2源码

  • 2017年06月28日 21:19
  • 920B
  • 下载

css —— 选择器优先级及jQuery遍历元素常用方法

一、部分常用css选择器 1、子元素选择器:> 作用:只选取直接子元素。 优点:使html元素层次很清晰的呈现。 2、相邻兄弟元素选择器:+ 作用:选取相邻兄弟元素中的第二个。适用于兄弟元素(可以...
  • qq_19865749
  • qq_19865749
  • 2016年07月26日 09:23
  • 1271

jquery中的for循环与each循环

jquery中的for循环与each循环
  • nianzhi1202
  • nianzhi1202
  • 2016年10月16日 13:09
  • 15629
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery中each的三种遍历方法
举报原因:
原因补充:

(最多只允许输入30个字)