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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
Js和VUE实现跑马灯效果
May 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文件上传实例详解!!!
2007/01/02 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
摘自启点的main.js
2008/04/20 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
python处理二进制数据的方法
2015/06/03 Python
python 实时遍历日志文件
2016/04/12 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
python开发入门——set的使用
2020/09/03 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
英国鞋网:Rubber Sole
2020/03/03 全球购物
吸烟检讨书2000字
2014/02/13 职场文书
关于元旦的广播稿
2014/02/16 职场文书
大学生社会实践方案
2014/05/11 职场文书
公司周年庆典标语
2014/10/07 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
复兴之路观后感
2015/06/02 职场文书
音乐剧猫观后感
2015/06/04 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis