$(obj).index(this)与$(this).index()异同讲解

$(this).index()在使用jQuery时出镜率非常高，在编写选项卡及轮播图等特效时经常用到，但$(obj).index(this)似乎有点陌生。

为便于理解，以下分两个使用场景加以分析。

场景一：同级元素标签相同

    <ul>

        <li>one</li>

        <li>two</li>

        <li>three</li>

        <li>four</li>

    </ul>

<script>

    //  $(this).index() 测试代码一

    $("li").on("click",function(){

        var index = $(this).index();

        console.log(index); // 依次点击li元素输出： 0,1,2,3

    })

    // $(obj).index(this) 测试代码二

    $("li").on("click",function(){

        var index = $("li").index(this);

        console.log(index); // 依次点击li元素输出： 0,1,2,3

}) </script>

执行两段脚本并依次点击li元素，都是输出： 0/1/2/3，在这个场景下，作用一样。

场景二：同级元素标签不相同

    <div>

        <p>this is span</p>

        <p>this is span</p>

        <b>this is b</b>

        <b>this is b</b>

    </div>

<script>

    //  $(this).index() 测试代码一

    $("b").on("click",function(){

        var index = $(this).index();

        console.log(index); // 依次点击b元素输出:2,3

    })

    // $(obj).index(this) 测试代码二

    $("b").on("click",function(){

        var index = $("b").index(this);

        console.log(index); // 依次点击b元素输出:2,3

    })

</script>

测试代码一中，index()是元素在当前同级元素中的位置下标，不区分标签；

测试代码二中，返回值是当前操作元素（this）在$（"b"）集合中的下标。（$( "b" )是jQuery对象集合，所以非同级元素也可以使用，有兴趣自己可以测试）

随机推荐

爱春秋之戏说春秋 Writeup
爱春秋之戏说春秋 Writeup 第一关图穷匕见这一关关键是给了一个图片,将图片下载到本地后,打开以及查看属性均无任何发现,尝试把图片转换为.txt格式.在文本的最后发现这样一串有规律的代码: 形 ...
动手开发自己的第一个 composer 包
原文:http://blog.jayxhj.com/2016/05/basic-composer-package-development/ composer 是 PHP 的依赖管理工具,本篇文章就来说 ...
【CodeForces 613B】Skills
题题意给你n个数,可以花费1使得数字+1,最大加到A,最多花费m.最后,n个数里的最小值为min,为A的有k个,给你cm和cf,求force=min*cm+k*cf 的最大值,和n个数操作后的结果 ...
一个线程间的通讯小程序&lowbar;&lowbar;(Java&lowbar;Thread&lowbar;Inout&period;Output)
//多线程通讯 //多个线程处理同一资源,但是任务不同 //等待唤醒方法: //wait():将线程变成为冻结状态,线程会被存储在线程池中; //notify():唤醒线程中的一个线程(任意的) // ...
struts2-权限拦截器、日志拦截器、execAndWait(进度条)拦截器配置
1.权限拦截器 package login; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.Serv ...
Git版本管理：Windows下Git配置与使用指南 Gitlab
简要介绍:Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理. 一.安装软件:msysGit-fullinstall-1.8.1.2 打开之后设置安装路径,默认为 ...
java一点内容
1.JAVA有哪些基本数据类型 String是不是基本数据类型 Java语言提供了八种基本类型: 六种数字类型(四个整数型,两个浮点型) 字节型byte 8位短整型short 16位整型int 3 ...
IOS使用 Visual Format Language 定义水平和垂直约束
定义限制条件来改变一个 UI 组件在其父视图的水平和垂直方向布局的方法. 可以使用方程式里 H:方向符号代表水平方向的边距,使用 V:方向符号代表垂直方向的边距. 转载请注明,本文转自:http:/ ...
Linux下passwd和shadow文件内容详解
一./etc/passwd /etc/passwd 文件是一个纯文本文件,每行采用了相同的格式: name:password:uid:gid:comment:home:shell name 用户登录名 ...
python之路-----网络编程
一:客户端/服务端j架构(C/S架构) 在生活中,最常见的C/S架构即是APP和网页服务器这个架构.Client和Server之间利用网络来进行通信,客户端和服务器端的程序不同,用户的程序主要在客户端 ...

秒客网

$(obj).index(this)与$(this).index()异同讲解

随机推荐

相关文章