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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 Javascript
js实现点击烟花特效
Oct 14 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
php MYSQL 数据备份类
2009/06/19 PHP
php正则表达式(regar expression)
2011/09/10 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
vuex实现购物车功能
2020/06/28 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
详解python中@的用法
2019/03/27 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Python多线程thread及模块使用实例
2020/04/28 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
自我评价的范文
2014/02/02 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
贷款担保书
2015/01/20 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
话题作文之生命的旋律
2019/12/17 职场文书