首页 > 代码库 > Jquery中each的三种遍历方法
Jquery中each的三种遍历方法
Jquery中each的三种遍历方法
$.post("urladdr",
{
"data" : "data"
},
function(data) {
$.each(data, function(n,value) {
});
});
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="http://www.mamicode.com/include/jQuery.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
//<input id="btn0" type="button" value="http://www.mamicode.com/利用jquery对象实现 修改表单中可见的文本域的值 $(‘input[type=text]:enabled‘)" />
$("#btn0").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:enabled").each(function(index,domEle){
//domEle.value="http://www.mamicode.com/xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn1" type="button" value="http://www.mamicode.com/利用jquery对象实现 修改表单中不可修改的文本域的值 $(‘input[type=text]:disabled‘)" />
$("#btn1").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:disabled").each(function(index,domEle){
//domEle.value="http://www.mamicode.com/xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn2" type="button" value="http://www.mamicode.com/利用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="http://www.mamicode.com/利用jquery对象实现 获取选中的下拉菜单的内容 $(‘select option:selected‘)" />
$("#btn3").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("select option:selected").each(function(index,domEle){
//domEle.value="http://www.mamicode.com/xxxxx";
alert($(domEle).text());
});
});
});
</script>
</head>
<body>
<form method="post" action="">
<input type="text" value="http://www.mamicode.com/可见元素1" />
<input type="text" value="http://www.mamicode.com/不可见元素1" disabled="disabled" />
<input type="text" value="http://www.mamicode.com/可见元素2" />
<input type="text" value="http://www.mamicode.com/不可见元素2" disabled="disabled" /><br>
<input type="checkbox" value="http://www.mamicode.com/美女" />美女
<input type="checkbox" value="http://www.mamicode.com/美男" />美男
<input type="checkbox" value="http://www.mamicode.com/大爷" />大爷
<input type="checkbox" value="http://www.mamicode.com/大妈" />大妈
<br>
<input type="radio" value="http://www.mamicode.com/男" />男
<input type="radio" value="http://www.mamicode.com/女" />女
<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="http://www.mamicode.com/利用jquery对象实现 修改表单中可修改的文本域的值 $(‘input[type=text]:enabled‘)" /><br>
<input id="btn1" type="button" value="http://www.mamicode.com/利用jquery对象实现 修改表单中不可修改的文本域的值 $(‘input[type=text]:disabled‘)" /><br>
<input id="btn2" type="button" value="http://www.mamicode.com/利用jquery对象实现 获取选中的复选框的个数 $(‘input[type=checkbox]:checked‘)" /><br>
<input id="btn3" type="button" value="http://www.mamicode.com/利用jquery对象实现 获取选中的下拉菜单的内容 $(‘select option:selected‘)" /><br>
</div>
</body>
</html>
- 顶
- 0
- 踩
Jquery中each的三种遍历方法