深入理解jquery中的each用法
1种通过each遍历li可以获得所有li的内容
<!--1种-->
<ulclass="one">
<li>11a</li>
<li>22b</li>
<li>33c</li>
<li>44d</li>
<li>55e</li>
</ul>
<button>输出每个li值</button>
<script>
//1种通过each遍历li可以获得所有li的内容
$("button").click(function(){
$(".one>li").each(function(){
//打印出所有li的内容
console.log($(this).text());
})
});
</script>
2种通过each遍历li通过$(this)给每个li加事件
<!--2种-->
<ulclass="two">
<li>2222</li>
<li>22b</li>
<li>3333</li>
<li>44d</li>
<li>5555</li>
</ul>
<script>
//2种通过each遍历li通过$(this)给每个li加事件
$('.two>li').each(function(index){
console.log(index+":"+$(this).text());
//给每个li加click点那个就变颜色
$(this).click(function(){
alert($(this).text());
$(this).css("background","#fe4365");
});
});
</script>
4种遍历所有li给所有li添加class类名
<!--4种-->
<ulclass="ctn3">
<li>Eat</li>
<li>Sleep</li>
<li>3种</li>
</ul>
<span>点击3</span>
<script>
//4种遍历所有li给所有li添加class类名
$('span').click(function(){
$('.ctn3>li').each(function(){
$(this).toggleClass('example');
})
});
</script>
5种 在each()循环里element==$(this)
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>each练习2</title>
<style>
div{
width:40px;
height:40px;
margin:5px;
float:left;
border:2pxbluesolid;
text-align:center;
}
span{
width:40px;
height:40px;
color:red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<divid="stop">Stophere</div>
<div></div>
<div></div>
<button>Changecolors</button>
<span></span>
</body>
<scriptsrc="jquery-1.11.1.min.js"></script>
<script>
//在each()循环里element==$(this)
$('button').click(function(){
$('div').each(function(index,element){
//element==this;
$(element).css("background","yellow");
if($(this).is("#stop")){
$('span').text("index:"+index);
returnfalse;
}
})
})
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！