jquery中的for循环与each循环

最新推荐文章于 2023-05-24 13:28:12 发布

2012013977

最新推荐文章于 2023-05-24 13:28:12 发布

阅读量5.2w

点赞数 3

分类专栏： js

本文链接：https://blog.csdn.net/nianzhi1202/article/details/52829946

版权

js 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>把所有tag为1的tag的值取出来</title>
</head>
<script src="./jquery-2.1.1.min.js"></script>
<body>
<ul>
<li tag='0'>one</li>
<li tag='1'>two</li>
<li tag='1'>three</li>
<li tag='0'>four</li>
<li tag='0'>five</li>
<li tag='0'>six</li>
</ul>
<button id="js">原生js</button>
<button id="jq">jquery</button>
<script>
//方法一，不知为什么在for内不能使用jquery
$('#js').click(function(){
var con = '';
// var tags = $('li');
var tags = document.getElementsByTagName('li');//可以是jquery中的$('li')
for(var i=0;i<tags.length;i++){
// alert(tags[i].innerHTML);//在此不能使用jquery中的text()
if(tags[i].getAttribute('tag') == 1){ //在此不能使用jquery中的tags[i].attr('tag')
// alert(tags[i].innerHTML);
con += tags[i].getAttribute('tag')+',';
}
}
alert(con);
})
// 方法二，既然使用了jquery，就可以不要使用for去遍历，使用each
$('#jq').click(function(){
var con = '';
$.each($('li'),function(i,j){
//i为元素的索引，从0开始,j为当前处理的元素对象
if($(j).attr('tag') == 1){
con += $(j).attr('tag')+',';
}
});
alert(con);
})
</script>
</body>

</html>

顺便复制一份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对
});