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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 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的cms
2010/12/19 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python绘制圆柱体的方法
2018/07/02 Python
Python可以实现栈的结构吗
2020/05/27 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
工作会议欢迎词
2014/01/16 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
结婚周年感言
2014/02/24 职场文书
酒店管理求职信
2014/06/09 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
质量保证书
2015/01/17 职场文书
校本培训个人总结
2015/02/28 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
电影红河谷观后感
2015/06/11 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
公司庆典主持词
2015/07/04 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
SQL Server使用导出向导功能
2022/04/08 SQL Server