深入理解jquery中的each用法

2020-11-27 来源：客趣旅游网

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>
<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>

显示全文

全部栏目

深入理解jquery中的each用法