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>