jquery获取元素索引值index()示例


Posted in Javascript onFebruary 13, 2014

jquery获取元素索引值index()方法:

jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数。

如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。

<ul> 
<li id="foo">foo</li> 
<li id="bar">bar</li> 
<li id="baz">baz</li> 
</ul> $('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置 
$('li').index($('#bar')); //1,传递一个jQuery对象 
$('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置 
$('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的做引位置 
$('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。

jquery获取元素索引值index()示例
//用于二级或者三级联动 <div id="nav"> 
<a href="http://www.51xuediannao.com/">建站素材</a> 
<a href="http://www.51xuediannao.com/">jquery特效</a> 
<a href="http://www.51xuediannao.com/">懒人主机</a> 
<a href="http://www.51xuediannao.com/qd63/">前端路上</a> 
</div> 
$("#nav a").click(function(){ 
//四个经典的用法 
var index1 = $("#nav a").index(this); 
var index2 = $("#nav a").index($(this)); 
var index3 = $(this).index() 
var index3 = $(this).index("a") 
alert(index3); 
return false; 
});
Javascript 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
Vue基于NUXT的SSR详解
Oct 24 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 #Javascript
使用javascript做的一个随机点名程序
Feb 13 #Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 #Javascript
js清理Word格式示例代码
Feb 13 #Javascript
Js与下拉列表处理问题解决
Feb 13 #Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 #Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 #Javascript
You might like
php验证是否是md5编码的简单代码
2014/04/01 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Laravel find in set排序实例
2019/10/09 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
Python设计模式之观察者模式实例
2014/04/26 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
韩国商务邀请函
2014/01/14 职场文书
项目经理任命书
2014/06/04 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
企业年会祝酒词
2015/08/11 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书