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>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
