深入理解jquery中的each用法

时间：2021-05-18

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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章