jquery中有隐式迭代，不需要我们再次对某些元素进行操作。但是如果涉及到不同元素有不同操作，需要进行each遍历。本文利用10个li设置不同的透明度的案例，对each方法进行说明。

语法：

$(元素).each(function(index,element){ });

参数index：表示元素索引，在本例中是0-9

参数element：表示对象，在本例中是每个li

案例效果：

代码如下

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

             li{

                 width: 100px;

                 height: 100px;

                 background-color: green;

                 list-style: none;

                 float: left;

                 margin-left: 10px;

             }

         </style>

         <script src="jquery-1.12.2.js"></script>

         <script type="text/javascript">

             $(function(){

                 //页面加载后,让每个li的透明度发生改变

                 $("li").each(function(index,element){

                     //第一个参数是索引,第二个参数是对象

                     $(element).css("opacity",(index+1)/10);

                 })

             });

         </script>

     </head>

     <body>

         <ul>

             <li>1</li>

             <li>2</li>

             <li>3</li>

             <li>4</li>

             <li>5</li>

             <li>6</li>

             <li>7</li>

             <li>8</li>

             <li>9</li>

             <li>10</li>

         </ul>

     </body>

 </html>

jQuery----each()方法的更多相关文章

  1. Django配合使用Jquery post方法

    Django使用jQuery的post方法需要解决两个问题: 1.Django中为了防止跨站请求,在post提交时都会带上csrf_token,利用Jquery进行post请求也需要:否则就会出现40 ...

  2. jQuery on()方法

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  3. jquery ajax 方法及各参数详解

    1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type ...

  4. jquery.extend方法

    jquery.extend()用来扩展jquery中方法,实现插件. 1.jQuery.extend函数详细用法! 扩展jQuery静态方法. 1$.extend({ 2test:function() ...

  5. jQuery extend方法使用及实现

    一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样 ...

  6. 优化加载jQuery的方法

    请看下面的一段代码: <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ...

  7. C#实现jQuery的方法连缀

    jQuery的方法连缀使用起来非常方便,可以简化语句,让代码变得清晰简洁.那C#的类方法能不能也实现类似的功能呢?基于这样的疑惑,研究了一下jQuery的源代码,发现就是需要方法连缀的函数方法最后返回 ...

  8. jQuery原型方法each使用和源码分析

    jQuery.each方法是jQuery的核心工具方法之一,通用例遍方法,可用于例遍对象和数组.不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象.通常需要两个参数 ...

  9. jQuery.clean()方法源码分析（一）

    在jQuery 1.7.1中调用jQuery.clean()方法的地方有三处,第一次就是在我之前的随笔分析jQuery.buildFramgment()方法里面的,其实还是构造函数的一部分,在处理诸如 ...

  10. MVC中使用Ajax提交数据 Jquery Ajax方法传值到action

    Jquery Ajax方法传值到action <script type="text/javascript"> $(document).ready(function(){ ...

随机推荐

  1. spring shiro 集成

    1.向spring项目中添加shiro相关的依赖 <dependency> <groupId>commons-logging</groupId> <artif ...

  2. 扩展LV手记

    情景概览 系统:CentOS Linux release 7.4.1708 (Core) 磁盘情况: 目标:将sda3扩展到sda2下的centos-root虚拟盘上 操作步骤 1.建立新的PV # ...

  3. web assembly是什么，能干什么

    web assembly混合javascript和另外底层语言编译的模块,共同运行.将js的高级,易用及c/c++的高效底层优势结合起来. 最可能的用处是提供一种可行的方法将原来的c/c++应用por ...

  4. 在 Azure 中的 Linux VM 上创建 MongoDB、Express、AngularJS 和 Node.js (MEAN) 堆栈

    本教程介绍如何在 Azure 中的 Linux VM 上实现 MongoDB.Express.AngularJS 和 Node.js (MEAN) 堆栈. 通过创建的 MEAN 堆栈,可以在数据库中添 ...

  5. [VS2008] 安装 AnkhSVN 后，选项中选择它，Pending Changes 窗口一闪而过，源代码管理工具自动跳回 【None】

    执行以下命令以修复: "C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE\devenv.exe" /re ...

  6. idea常用到的命令

    idea大小写转换:ctr+shift+u ctrl+alt+b,跳转到接口的方法实现处

  7. 用path动画绘制水波纹

    用path动画绘制水波纹 效果 源码 // // ViewController.m // PathAnimation // // Created by YouXianMing on 15/7/3. / ...

  8. 使用GPUImage渲染图片教程

    使用GPUImage渲染图片教程 Prepare - 准备 GPUImage开源库并不像普通的开源库那样子,拖进你的工程中就可以用.以下将详细的告诉你如何将GPUImage导入到你的工程当中. 首先上 ...

  9. swift关于UIView设置frame值的extension

    swift关于UIView设置frame值的extension 使用 说明 1. 使用如上图,很简单,不再赘述 2. 在extension给添加的计算属性提供getter,setter方法即可 源码 ...

  10. apache的AllowOverride以及Options使用详解

    通常利用Apache的rewrite模块对 URL 进行重写的时候, rewrite规则会写在 .htaccess 文件里.但要使 apache 能够正常的读取.htaccess 文件的内容,就必须对 ...