深入理解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 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
javascript里使用php代码实例
Dec 13 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 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 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
一个基于jquery的文本框记数器
2012/09/19 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
vue.js实现请求数据的方法示例
2017/02/07 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python实现上下文管理器的方法
2020/08/07 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
中学生个人自我评价
2014/02/06 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
护士自我鉴定总结
2014/03/24 职场文书
网络信息安全承诺书
2014/03/26 职场文书
社区党员公开承诺书
2014/08/30 职场文书
离婚财产处理协议书
2014/09/30 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
放假通知范文
2015/04/14 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL