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移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
javascript实现智能手环时间显示
Sep 18 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
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python编写一个优美的下载器
2018/04/15 Python
如何在python中实现随机选择
2019/11/02 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
社保委托书怎么写
2014/08/02 职场文书
创先争优宣传标语
2014/10/08 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
工作感想范文
2015/08/07 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书