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 相关文章推荐
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
JavaScript常用工具函数大全
May 06 Javascript
element中table高度自适应的实现
Oct 21 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php中cookie的使用方法
2014/03/29 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
js实现随机8位验证码
2020/07/24 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python标准异常和异常处理详解
2015/02/02 Python
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python简明入门教程
2015/08/04 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
pytorch梯度剪裁方式
2020/02/04 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
结婚典礼证婚词
2014/01/11 职场文书
《都江堰》教学反思
2014/02/07 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
致运动员的广播稿
2015/08/19 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL