Home >Web Front-end >JS Tutorial >Three traversal methods of each in Jquery

Three traversal methods of each in Jquery

韦小宝Original: 2017-11-27 10:05:211954browse

JqueryThe three traversal methods of each, let you see the useful each method in jquery, for jqueryIf you are interested, you can collect it and take a look!

1. Selector + traversal

$('div').each(function (i){

i is the index value

this means getting and traversing each DOM object

});

2. Selector + traversal

$('div' ).each(function (index,domEle){

index is the index value

domEle means getting and traversing each dom object

});

3. A more applicable traversal method

1) First obtain a collection object

2) Traverse each element of the collection object

var d =$("div");

$.each(d,function (index,domEle){

d is the collection to be traversed

index is the index value

domEle means to traverse each dom pair

});

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>属性选择器学习</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
$("#btn0").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:enabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});

$("#btn1").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:disabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});

$("#btn2").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
alert($("input[type=checkbox]:checked").length);
});

$("#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对象实现 修改表单中可修改的文本域的值 $(&#39;input[type=text]:enabled&#39;)" /><br>
<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值 $(&#39;input[type=text]:disabled&#39;)" /><br>
<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $(&#39;input[type=checkbox]:checked&#39;)" /><br>
<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容 $(&#39;select option:selected&#39;)" /><br>
</div>
</body>
</html>

The above is a brief description and code demonstration of the three traversal methods of each in Jquery.

Related recommendations:

JQuery simulates click events and automatically triggers events

How to use jquery efficiently

jquery simulates the title prompt effect

The above is the detailed content of Three traversal methods of each in Jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The difference between jQuery's attr() and prop()Next article：The difference between jQuery's attr() and prop()

See more

Three traversal methods of each in Jquery

Related articles