深入理解jquery中的each用法


Posted in Javascript onDecember 14, 2016

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
小程序如何构建骨架屏
May 29 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
小程序实现筛子抽奖
May 26 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 #Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 #Javascript
jQuery的extend方法【三种】
Dec 14 #Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 #Javascript
Bootstrap导航条的使用和理解3
Dec 14 #Javascript
jQuery学习笔记之入门
Dec 14 #Javascript
Bootstrap轮播图的使用和理解4
Dec 14 #Javascript
You might like
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
python获得图片base64编码示例
2014/01/16 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
django创建css文件夹的具体方法
2020/07/31 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
活动总结的格式
2014/05/07 职场文书
启动仪式策划方案
2014/06/14 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫