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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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简单生成一组与多组随机字符串的方法
2017/05/09 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
JavaScript的Function详细
2006/11/14 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
windows支持哪个版本的python
2020/07/03 Python
Python 必须了解的5种高级特征
2020/09/10 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
售后服务承诺书范文
2014/03/26 职场文书
计划生育标语
2014/06/23 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android