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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
javascript history对象详解
Feb 09 Javascript
手机端转换rem适应
Apr 01 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
vue实现匀速轮播效果
Jun 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
php 前一天或后一天的日期
2008/06/28 PHP
PHP基础学习小结
2011/04/17 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
python http接口自动化脚本详解
2018/01/02 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
python sorted函数原理解析及练习
2020/02/10 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
高职助产应届生自荐信
2013/09/24 职场文书
初三新学期计划书
2014/05/03 职场文书
临床医学专业求职信
2014/08/08 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
上课说话检讨书500字
2014/11/01 职场文书