脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery each

深入理解jquery中的each用法

 更新时间：2016年12月14日 09:13:37   作者：云悠  
本文主要对jquery中的each用法进行介绍，相信会对大家学习each方法会很有帮助，下面就跟小编一起来看下吧

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>

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

您可能感兴趣的文章:

相关文章

  • 利用jQuery中的ajax分页实现代码

    利用jQuery中的ajax分页实现代码

    这篇文章主要介绍了利用jQuery中的ajax分页实现代码的相关资料，对ajax分页感兴趣的朋友可以参考一下
    2016-02-02
  • 理解jquery事件冒泡

    理解jquery事件冒泡

    这篇文章主要介绍了jquery事件冒泡，以及如何阻止jQuery事件冒泡现象，感兴趣的朋友可以参考一下
    2016-01-01
  • jQuery动画效果实现图片无缝连续滚动

    jQuery动画效果实现图片无缝连续滚动

    这篇文章主要为大家介绍了jQuery动画效果实现图片无缝连续滚动，实现类似连续不间断的滚动广告位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery实现条件搜索查询、实时取值及升降序排序的方法分析

    jQuery实现条件搜索查询、实时取值及升降序排序的方法分析

    这篇文章主要介绍了jQuery实现条件搜索查询、实时取值及升降序排序的方法,结合实例形式分析了jQuery针对页面元素属性操作相关实现技巧,需要的朋友可以参考下
    2019-05-05
  • Jquery 实现Tab效果 思路是js思路

    Jquery 实现Tab效果 思路是js思路

    Jquery 实现Tab效果，思路就是普通的用js的思路控制的，脚本之家发布过更精简的代码，这个比较适合一直用js开始学用jquery控制的朋友一个参考。
    2010-03-03
  • jquery 实现两级导航菜单附效果图

    jquery 实现两级导航菜单附效果图

    两级导航菜单在网页中非常实用，实现的方法也有很多，本文为大家介绍下使用jquery是如何实现的
    2014-03-03
  • JQuery中Bind()事件用法分析

    JQuery中Bind()事件用法分析

    这篇文章主要介绍了JQuery中Bind()事件用法,实例分析了Bind()事件的功能、特点与绑定事件时的使用技巧,需要的朋友可以参考下
    2015-05-05
  • jquery+CSS实现的多级竖向展开树形TRee菜单效果

    jquery+CSS实现的多级竖向展开树形TRee菜单效果

    这篇文章主要介绍了jquery+CSS实现的多级竖向展开树形TRee菜单效果,通过jquery自定义函数设置相应参数实现属性TRee菜单效果的功能,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • jqPlot jQuery绘图插件的使用

    jqPlot jQuery绘图插件的使用

    jqPlot是一个灰常强大的图表工具，曲线，柱状，饼图，应该有尽有，更要命的是，调用方便~~
    2016-06-06
  • jQuery DOM操作实例

    jQuery DOM操作实例

    本文用代码的方式详细讲解了jQuery的DOM操作,具体操作方法请详细参看代码中的注释部份
    2014-03-03

最新评论