快捷導(dǎo)航

深入理解jquery中的each用法

更新時(shí)間：2016年12月14日 09:13:37 作者：云悠

本文主要對(duì)jquery中的each用法進(jìn)行介紹，相信會(huì)對(duì)大家學(xué)習(xí)each方法會(huì)很有幫助，下面就跟小編一起來看下吧

1種通過each遍歷li 可以獲得所有l(wèi)i的內(nèi)容

<!-- 1種 -->
  <ul class="one">
    <li>11a</li>
    <li>22b</li>
    <li>33c</li>
    <li>44d</li>
    <li>55e</li>
  </ul>
  <button>輸出每個(gè)li值</button>
<script>
  // 1種 通過each遍歷li 可以獲得所有l(wèi)i的內(nèi)容
  $("button").click(function(){ 
    $(".one > li").each(function(){
      // 打印出所有l(wèi)i的內(nèi)容
      console.log($(this).text());
    })
  });
</script>

2種通過each遍歷li 通過$(this)給每個(gè)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)給每個(gè)li加事件
  $('.two > li').each(function(index) {
    console.log(index +":" + $(this).text());
    // 給每個(gè)li加click 點(diǎn)那個(gè)就變顏色
    $(this).click(function(){
      alert($(this).text());
      $(this).css("background","#fe4365");
    });
  });
</script>

4種遍歷所有l(wèi)i 給所有l(wèi)i添加 class類名

<!-- 4種 -->
  <ul class="ctn3">
    <li>Eat</li>
    <li>Sleep</li>
    <li>3種</li>
  </ul>
  <span>點(diǎn)擊3</span>
<script>
  // 4種 遍歷所有l(wèi)i 給所有l(wèi)i添加 class類名
  $('span').click(function(){
    $('.ctn3 > li').each(function(){
      $(this).toggleClass('example');
    })
  });
</script>

5種在each()循環(huán)里 element == $(this)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>each練習(xí)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()循環(huán)里 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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

jquery
each

相關(guān)文章

Jquery實(shí)現(xiàn)三層遍歷刪除功能代碼
遍歷每一行的同時(shí)一定要記住這里是gridviewrow不是datarow，找到這個(gè)選中項(xiàng)在執(zhí)行刪除
2013-04-04
jQuery插件HighCharts繪制2D帶Label的折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶Label的折線圖效果,結(jié)合實(shí)例形式分析了jQuery圖形繪制插件HighCharts實(shí)現(xiàn)折線圖效果的具體操作步驟與相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery實(shí)現(xiàn)獲取綁定自定義事件元素的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取綁定自定義事件元素的方法,涉及jQuery方法重載、事件綁定及元素操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12
jquery ajax提交表單數(shù)據(jù)的兩種實(shí)現(xiàn)方法
貌似AJAX越來越火了，作為一個(gè)WEB程序開發(fā)者要是不會(huì)這個(gè)感覺就要落伍，甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開發(fā)者，當(dāng)然我也要“隨波逐流”一把，不然飯碗不保??！
2010-04-04
深入淺出 jQuery中的事件機(jī)制
本文重點(diǎn)給大家介紹jquery中的事件機(jī)制，涉及到onload和ready兩者的區(qū)別介紹，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
2016-08-08
用jQuery與JSONP輕松解決跨域訪問的問題
本篇文章主要是對(duì)使用jQuery與JSONP輕松解決跨域訪問的問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
jquery添加div實(shí)現(xiàn)消息聊天框
這篇文章主要為大家詳細(xì)介紹了jquery添加div實(shí)現(xiàn)消息聊天框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
基于jQuery實(shí)現(xiàn)的扇形定時(shí)器附源碼下載
這篇文章給大家介紹基于jquery實(shí)現(xiàn)的扇形定時(shí)器，涉及到pietimer知識(shí)點(diǎn)的學(xué)習(xí)，對(duì)jquery定時(shí)器感興趣的朋友一起了解了解吧
2015-10-10
jquery offset函數(shù)應(yīng)用實(shí)例
點(diǎn)擊一個(gè)按鈕，然后在按鈕的下方顯示一個(gè)div,當(dāng)按鈕位于角落時(shí)，div的位置設(shè)定就需要調(diào)整，不然，div將顯示不完全.我打算使用offset()方法實(shí)現(xiàn)此功能
2012-11-11
jQuery/JS監(jiān)聽input輸入框值變化實(shí)例
在本篇文章里小編給大家整理的是一篇關(guān)于jQuery/JS監(jiān)聽input輸入框值變化實(shí)例內(nèi)容，需要的朋友們學(xué)習(xí)下。
2019-10-10