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 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
JS实现放大镜效果
Sep 21 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 基本语法格式
2009/12/15 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
javascript回调函数详解
2018/02/06 Javascript
小程序云开发实战小结
2018/10/25 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
JS实现普通轮播图特效
2020/01/01 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python3中编码获取网页的实例方法
2020/11/16 Python
python反扒机制的5种解决方法
2021/02/06 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
人民教师求职自荐信
2014/03/12 职场文书
测控技术自荐信
2014/06/05 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android