深入理解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 原型模式实现OOP的再研究
Apr 09 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python格式化输出%s和%d
2018/05/07 Python
python数组循环处理方法
2019/08/26 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
北京奥运会主题口号
2014/06/13 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
单位考核聘任报告
2015/03/02 职场文书
消费者投诉书范文
2015/07/02 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android