深入理解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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!