JQuery index()方法使用代码


Posted in Javascript onJune 02, 2010

学生科的网站首页有19个Repeater控件。6个div块的tabs切换。

做tabs切换总不能一个个去写方式吧:(代码如下....)

$(function() 
{ 
$("#tabs a:eq(0),#tabs2 a:eq(0),#dbt_l_t_tabs a:eq(0),#dbt_r_t_tabs a:eq(0)").addClass("m_on"); 
$("#tabs a:gt(0),#tabs2 a:gt(0),#dbt_l_t_tabs a:gt(0),#dbt_r_t_tabs a:gt(0)").addClass("m_out"); 
$("#tabs a,#tabs2 a,#dbt_l_t_tabs a,#dbt_r_t_tabs a").each(function(){ 
$(this).mouseover(function(){ 
if($(this).hasClass("m_out")) 
{ 
var ab=$(this).closest("li").closest("div").attr("id"); 
var ulid="ul_"+ab; 
var arra=$("#"+ab+" a"); 
var e=arra.index($(this)); 
$("#"+ab+" a").removeClass("m_on").addClass("m_out"); 
$(this).removeClass("m_out").addClass("m_on"); 
$("#"+ulid+" ul").hide(); 
$("#"+ulid+" ul:eq("+e+")").show(); 
} 
}) 
}) 
})

23行赋值使用了JQuery的index方法。查找一个对象的某一元素在这个对象里的索引值。
官方一个说明:$('li').index($('#bar'));这里的index参数用单引号。在测试过程中总是失败。。不知道为什么。后来直接先定义了$(this)所在对象:var arra=$("#"+ab+" a");。
就可以成功返回索引了。
以下是其中一个Tabs
<div class="sh_topnew"> 
<div class="w1bg"></div> 
<div id="tabs"> 
<li><div class="w1bg"></div><a href="List.aspx?Uid=185">新闻动态</a><div class="w1bg"></div></li> 
<li><div class="w1bg"></div><a href="List.aspx?Uid=160">团学专题工作</a><div class="w1bg"></div></li> 
</div> 
<div class="w1bg"></div></div> 
<div class="w636"> 
<div class="w300"><img src="images/222.jpg" /></div> 
<div class="w336" id="ul_tabs"><ul></ul><ul class="nodis"> 
<li><a href="Show.aspx?Uid=194&ID=6393" title="团干培训通知">[团干培训] 团干培训通知</a>2010-05-17</li> 
<li><a href="Show.aspx?Uid=193&ID=6392" title="我校团委开展学风建设主体活动">[团日活动] 我校团委开展学风建设主体活动</a>2010-05-17</li> 
</ul></div> 
</div>
Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
详解javascript函数写法大全
Mar 25 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
JavaScript实现页面动态验证码的实现示例
Mar 23 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 #Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 #Javascript
一些经常会用到的Javascript检测函数
May 31 #Javascript
jquery URL参数判断,确定菜单样式
May 31 #Javascript
javascript 全等号运算符使用说明
May 31 #Javascript
js的逻辑运算符 ||
May 31 #Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
php获取某个目录大小的代码
2008/09/10 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python、Javascript中的闭包比较
2015/02/04 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Django框架模板的使用方法示例
2019/05/25 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
2014国培学习感言
2014/03/05 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
大学生党员承诺书
2014/05/20 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
个人收入证明范本
2015/06/12 职场文书