1種 通過each遍歷li 可以獲得所有li的內容
<!-- 1種 -->
<ul class="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種 -->
<ul class="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種 -->
<ul class="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)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each練習2</title>
<style>
div {
width: 40px;
height: 40px;
margin: 5px;
float: left;
border: 2px blue solid;
text-align: center;
}
span {
width: 40px;
height: 40px;
color: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<button>Change colors</button>
<span></span>
</body>
<script src="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);
return false;
}
})
})
</script>
</html>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！