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 自动完成脚本整理(33个)
Oct 20 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
vue脚手架项目创建步骤详解
Mar 02 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/30 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
php mysql 封装类实例代码
2016/09/18 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
PHP实现计算器小功能
2020/08/28 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
常用DOM整理
2015/06/16 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
详解flask表单提交的两种方式
2018/07/21 Python
python 同时运行多个程序的实例
2019/01/07 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
电子银行营销方案
2014/02/22 职场文书
投资建议书模板
2014/05/12 职场文书
党员承诺书格式范文
2015/04/28 职场文书
如何写观后感
2015/06/19 职场文书
四群教育工作总结
2015/08/10 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript