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 相关文章推荐
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
js模拟实现百度搜索
Jun 28 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
Python学习小技巧之列表项的排序
2017/05/20 Python
python决策树之C4.5算法详解
2017/12/20 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python 多进程队列数据处理详解
2019/12/23 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
应届毕业生求职信
2013/11/30 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
素质拓展训练感想
2015/08/07 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL