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中删除指定数组中指定的元素的代码
Feb 12 Javascript
通过url查找a元素并点击
Apr 09 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
Python中扩展包的安装方法详解
2017/06/14 Python
Python 列表理解及使用方法
2017/10/27 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
渗透攻击的测试步骤
2014/06/07 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
写好求职信第一句话的技巧
2013/10/26 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
大学毕业感言200字
2014/03/09 职场文书
财务检查整改报告
2014/11/06 职场文书
2014年工程师工作总结
2014/11/25 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏