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 相关文章推荐
关于js中for in的缺陷浅析
Dec 02 Javascript
Javascript基础教程之switch语句
Jan 18 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
jquery实现上传文件进度条
Mar 26 jQuery
在Vue中使用HOC模式的实现
Aug 23 Javascript
js实现石头剪刀布游戏
Oct 11 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
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python3中property使用方法详解
2019/04/23 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
PyTorch中的Variable变量详解
2020/01/07 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
小学语文教学反思
2014/02/10 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
大学生入党自传2015
2015/06/26 职场文书