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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
JS实现小米轮播图
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
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Tornado高并发处理方法实例代码
2018/01/15 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
python加载自定义词典实例
2019/12/06 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
中学教师自我鉴定
2014/02/07 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
Golang实现AES对称加密的过程详解
2021/05/20 Golang
详解Java实现数据结构之并查集
2021/06/23 Java/Android
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server