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 相关文章推荐
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
原生Javascript和jQuery做轮播图简单例子
Oct 11 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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 split汉字
2009/06/05 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
完美的php分页类
2017/10/24 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
详解Python中for循环的使用方法
2015/05/14 Python
Python中扩展包的安装方法详解
2017/06/14 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
Python登录注册验证功能实现
2018/06/18 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
网游商务专员求职信
2013/10/15 职场文书
感恩教育活动总结
2014/05/05 职场文书
保研专家推荐信范文
2015/03/25 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Python一行代码实现自动发邮件功能
2021/05/30 Python
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript
详解如何使用Nginx解决跨域问题
2022/05/06 Servers