1种 通过each遍历li 可以获得所有li的内容

  1.     <!-- 1种 -->
  2.     <ul class="one">
  3.         <li>11a</li>
  4.         <li>22b</li>
  5.         <li>33c</li>
  6.         <li>44d</li>
  7.         <li>55e</li>
  8.     </ul>
  9.     <button>输出每个li值</button>
  10. <script>
  11.     // 1种 通过each遍历li 可以获得所有li的内容
  12.     $("button").click(function(){
  13.         $(".one > li").each(function(){
  14.             // 打印出所有li的内容
  15.             console.log($(this).text());
  16.         })
  17.     });
  18. </script>

2种 通过each遍历li 通过$(this)给每个li加事件

  1.     <!-- 2种 -->
  2.     <ul class="two">
  3.         <li>2222</li>
  4.         <li>22b</li>
  5.         <li>3333</li>
  6.         <li>44d</li>
  7.         <li>5555</li>
  8.     </ul>
  9. <script>
  10.     // 2种 通过each遍历li 通过$(this)给每个li加事件
  11.     $('.two > li').each(function(index) {
  12.         console.log(index +":" + $(this).text());
  13.  
  14.         // 给每个li加click 点那个就变颜色
  15.         $(this).click(function(){
  16.             alert($(this).text());
  17.             $(this).css("background","#fe4365");
  18.         });
  19.  
  20.     });
  21. </script>

4种 遍历所有li 给所有li添加 class类名

  1.     <!-- 4种 -->
  2.     <ul class="ctn3">
  3.         <li>Eat</li>
  4.         <li>Sleep</li>
  5.         <li>3种</li>
  6.     </ul>
  7.     <span>点击3</span>
  8. <script>
  9.     // 4种 遍历所有li 给所有li添加 class类名
  10.     $('span').click(function(){
  11.         $('.ctn3 > li').each(function(){
  12.             $(this).toggleClass('example');
  13.         })
  14.     });
  15. </script>

5种  在each()循环里 element == $(this)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>each练习2</title>
  6.  
  7.     <style>
  8.         div {
  9.             width: 40px;
  10.             height: 40px;
  11.             margin: 5px;
  12.             float: left;
  13.             border: 2px blue solid;
  14.             text-align: center;
  15.         }
  16.         span {
  17.             width: 40px;
  18.             height: 40px;
  19.             color: red;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.  
  25.     <div></div>
  26.     <div></div>
  27.     <div></div>
  28.     <div id="stop">Stop here</div>
  29.     <div></div>
  30.     <div></div>
  31.     <button>Change colors</button>
  32.     <span></span>
  33.  
  34. </body>
  35. <script src="jquery-1.11.1.min.js"></script>
  36. <script >
  37.      // 在each()循环里 element == $(this)
  38.     $('button').click(function(){
  39.         $('div').each(function(index,element){
  40.             //element == this;
  41.             $(element).css("background","yellow");
  42.  
  43.             if( $(this).is("#stop")){
  44.                 $('span').text("index :" + index);
  45.                 return false;
  46.             }
  47.         })
  48.     })
  49. </script>
  50. </html>

jq的each理解的更多相关文章

  1. jq初始,选择器,事件,内容操作,样式操作

    jq操作页面文档http://jquery.cuishifeng.cn/ jq初始 <!DOCTYPE html> <html> <head> <meta c ...

  2. HDU 3466 Proud Merchants 带有限制的01背包问题

    HDU 3466 Proud Merchants 带有限制的01背包问题 题意 最近,伊萨去了一个古老的国家.在这么长的时间里,它是世界上最富有.最强大的王国.因此,即使他们的国家不再那么富有,这个国 ...

  3. jQ中对attr()方法的理解

    在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中,用一个attr()就可以全部搞定了,赞一个先 ^^jquer ...

  4. js/jq宽高的理解与运用

    document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftd ...

  5. 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件

    模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...

  6. jq方法中 $(window).load() 与 $(document).ready() 的区别

    通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...

  7. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  8. 【jQuery】$.ajax() 常用参数理解

    参考:http://hemin.cn/jq/jQuery.ajax.html注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置.个人理解全局设置,在每次调用$.ajax()时都会执行 ...

  9. PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能

    摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...

随机推荐

  1. <cerrno>

    文件头名称: <cerrno>(errno.h) 文件头描述: 文件内定义了如下的宏  errno 最后一个错误代码 加上其他至少的三个宏常量:EDOM,ERANGE 和EILSEQ 宏定 ...

  2. 使用es6总结笔记

    1. let.const 和 block 作用域 在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部). let 关键词声明的变量不具备 ...

  3. BFC与合并 浅析

    BFC BFC 全称 Block Formatting Context.每个渲染区域用formatting context表示,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用在正常流中的盒 ...

  4. 【Linux 运维】 安装PHP工具Composer

    一.安装PHP 由于Composer是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的 ...

  5. linux服务器操作小技巧

    python程序后台一直运行,并将打印信息输出到文件中 nohup -u test.py > out.txt & -u 表示无缓冲,直接将打印信息输出带文件中 &表示程序后台运行

  6. python leveldb 文档

    标签(空格分隔): python leveldb import leveldb db = leveldb.LevelDB('./db') db.Put('hello', 'world') print ...

  7. [leetcode-748-Largest Number At Least Twice of Others]

    In a given integer array nums, there is always exactly one largest element. Find whether the largest ...

  8. cookie，localstorge，sessionstorge三者总结

    相同点:都是客户端存储东西的: 不同: 1大小,cookie最小;locastorge最大 2 cookie设置好会在header头里面自动带的:但是ls和ss不会:ls同个浏览下不同网页(非跨域)都 ...

  9. oracle数据库之PL/SQL 流程控制语句

    介绍 PL/SQL 的流程控制语句, 包括如下三类: 1.控制语句: IF 语句 2.循环语句: LOOP 语句, EXIT 语句 3.顺序语句: GOTO 语句, NULL 语句 一 条件语句 IF ...

  10. 第二章 持续集成jenkins工具使用之系统基本设置

    Jenkin系统初始化成功后,会进入用户设置页面,设置用户信息后即可进入系统,如果没有设置用户,jenkins系统默认的用户是admin,密码administrator 1.1         Con ...