$(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对象集合,所以非同级元素也可以使用,有兴趣自己可以测试)
随机推荐
- VUE进阶(路由等)
初级教程:http://www.cnblogs.com/dmcl/p/6137469.html VUE进阶 自定义指令 http://cn.vuejs.org/v2/guide/custom-dire ...
- Xamarin GitHub 下载的源码运行不了
初学Xamarin ,各种折腾,大概这公司破电脑配置差,老是很多问题. GitHub 真是个好东西,可以参考别人做的,不过下载来运行不了就各种折腾了,为此我重装电脑两次了,反正win10安装就十几分 ...
- 浅谈 虚方法(virtual)
虚方法 理解:从字面意思来讲,"虚",可有可无,子类对父类的某种方法的重写,可以重写,也可以不重写. 虚方法,顾名思义(装个13),就是某种方法. 用法:public virtua ...
- C++学习笔记1(扩充:C++中的格式控制)
前一章,我们了解了再C++中的标准的输入输出问题,那么肯能就有人会问了再C语言中我们可以灵活的控制输出和显示,那么再再C++中可以实现吗?我的回答是当然可以的,只不过再C++中的控制可能相比较而言要比 ...
- Java排序算法之希尔(Shell)排序
基本思想: 希尔排序就是对直接插入排序的一个优化.现在有一个array,希尔排序就是设定一个增量incrementNum(0<incrementNum<array.length).先从ar ...
- Objective-C 实用关键字详解1「面试、工作」看我就 🐒 了 ^_^.
在写项目 或 阅读别人的代码(一些优秀的源码)中,总能发现一些常见的关键字,随着编程经验的积累大部分还是知道是什么意思 的. 相信很多开发者跟我当初一样,只是基本的常用关键字定义属性会使用,但在关键字 ...
- LeetCode 207. Course Schedule(拓扑排序)
题目 There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have p ...
- [Git]06 如何提交空目录
git和 svn不同,仅仅跟踪文件的变动,不跟踪目录.所以,一个空目录,如果里面没有文件,即便 git add 这个目录,另外在别处 check out 的时候,是没有这个空目录的. 只跟踪文件 ...
- idea: 纯 http 上的双向通信
纯 http 上的双向通信 最近大概看了下 rxJava 的订阅者模式,然后突发奇想有没有可能用类似的思路实现纯 http 上的双向通信 A 是传统的 http 服务器 B 是普通的客户端,假设我们能 ...
- 《分布式Java应用之基础与实践》读书笔记三
对于大型分布式Java应用与SOA,我们可以从以下几个方面来分析: 为什么需要SOA SOA是什么 eBay的SOA平台 可实现SOA的方法 为什么需要SOA 第一个现象是系统多元化带来的问题,可 ...