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背投广告代码的完善
Apr 08 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
javascript+css实现进度条效果
Mar 25 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+javascript液晶时钟
2006/10/09 PHP
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
layui表格数据重载
2019/07/27 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python实现的归并排序算法示例
2017/11/21 Python
python爬虫使用cookie登录详解
2017/12/27 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
如何用Python 加密文件
2020/09/10 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
C语言笔试集
2012/07/24 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
幼儿园家长评语大全
2014/04/16 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
单独二胎证明
2015/06/24 职场文书
教师节主题班会教案
2015/08/17 职场文书