深入理解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继承--原型链继承和类式继承
Apr 08 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
JS制作简单的三级联动
Mar 18 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
Node.js实现文件上传
Jul 05 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
koa-router路由参数和前端路由的结合详解
May 19 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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产生不重复随机数的5个方法总结
2014/11/12 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
JS继承用法实例分析
2015/02/05 Javascript
Yii2使用Bootbox插件实现自定义弹窗
2015/04/02 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
js获取form的方法
2015/05/06 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python 如何将office文件转换为PDF
2020/09/22 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
十八届三中全会报告学习材料
2014/02/17 职场文书
益达广告词
2014/03/14 职场文书
煤矿安全生产标语
2014/06/06 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2014年公务员工作总结
2014/11/18 职场文书
2014年招生工作总结
2014/11/26 职场文书
首席执行官观后感
2015/06/03 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
《秋思》教学反思
2016/02/23 职场文书