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模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
vue实现数字滚动效果
Jun 29 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 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获取网站域名和地址的代码
2008/08/17 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
img的onload的另类用法
2008/01/10 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
init进程的作用
2012/04/12 面试题
营销主管自我评价怎么写
2013/09/19 职场文书
大专生简历的自我评价
2013/11/26 职场文书
开学典礼决心书
2014/03/11 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书