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 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
原生js实现轮播图
Feb 27 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
PHP的FTP学习(一)
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
pyramid配置session的方法教程
2013/11/27 Python
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
python Flask实现restful api service
2017/12/04 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
研讨会主持词
2014/04/02 职场文书
开展创先争优活动总结
2014/08/28 职场文书
护士年终个人总结
2015/02/13 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
Python进程池与进程锁之语法学习
2022/04/11 Python