深入理解jquery中的each用法

2019-11-19 18:30:45

字体：大中小

来源：转载

供稿：网友

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>

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

上一篇：BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

下一篇：Bootstrap基本模板的使用和理解1