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 注册事件代码
Jan 27 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 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
PHP获取数组的键与值方法小结
2015/06/13 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
php实现用户登陆简单实例
2017/04/04 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
用cssText批量修改样式
2009/08/29 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
学习python分支结构
2019/05/17 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
python中Mako库实例用法
2020/12/31 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
2014年党课学习材料
2014/05/11 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
优秀团员事迹材料
2014/12/25 职场文书
小学六一主持词开场白
2015/05/28 职场文书
春风化雨观后感
2015/06/11 职场文书
2016中秋节问候语
2015/11/11 职场文书
详解python的异常捕获
2022/03/03 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电