DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> 深入理解jquery中的each用法
深入理解jquery中的each用法
編輯:JQuery入門技巧     

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>

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved