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数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
node中的密码安全(加密)
Sep 17 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
CI框架常用函数封装实例
2016/11/21 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
React props和state属性的具体使用方法
2018/04/12 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
Python用GET方法上传文件
2015/03/10 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python实现按长宽比缩放图片
2018/06/07 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python如何实现单链表的反转
2020/02/10 Python
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
信访工作者先进事迹
2014/01/17 职场文书
竞选体育委员演讲稿
2014/04/26 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
老兵退伍感言
2015/08/03 职场文书