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脚本的性能的几个注意事项
Dec 22 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
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 过滤危险html代码
2009/06/29 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python交互式图形编程实例(三)
2017/11/17 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
shell变量的作用空间是什么
2013/08/17 面试题
四风查摆剖析材料
2014/10/10 职场文书
查摆问题整改措施
2014/10/24 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS