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 返回布尔值Is()条件判断方法代码
May 14 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
JavaScript利用键盘码控制div移动
Mar 19 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动态生成javascript文件的2个例子
2014/04/11 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
python软件都是免费的吗
2020/06/18 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
美德少年事迹材料
2014/01/23 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle