JQuery index()方法使用代码

学生科的网站首页有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>

赞 (0)

相关推荐

  • jQuery实现获取元素索引值index的方法

    jQuery实现获取元素索引值index的方法

    本文实例讲述了jQuery实现获取元素索引值index的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • Jquery index()方法 获取相应元素索引值

    index([subject])方法,返回值:Number(从0开始计数) index()方法返回指定元素相对于其他指定元素的 index 位置.注释:如果未找到元素,index() 将返回 -1. 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js">&l

  • jQuery中index()方法用法实例

    本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值. 索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值是指定元素在其同辈元素集合中的索引位置. 复制代码 代码如下: $(selector).index() 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo

  • jquery带有索引按钮且自动轮播切换特效代码分享

    jquery带有索引按钮且自动轮播切换特效代码分享

    本文实例讲述了jquery带有索引按钮且自动轮播切换特效.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单. 运行效果图:                              -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" hr

  • jquery获取元素索引值index()示例

    jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. 复制代码 代码如下: <ul> <

  • jquery索引在使用中的一些困惑

    今日同事很正式的向我提出了两个关于jquery的问题,我也很正式得做了回答,顺便把源码贴到这里希望对朋友们有所帮助: 复制代码 代码如下: <script type="text/javascript"> $(function(){ $("input[type=button]").click(function(){ alert($(this).index()); }) }) </script> <ul> <li><

  • jquery 获取当前元素的索引值

    JavaScript代码 $("li").hover(function(){ alert($("li").index(this)); }); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] .index函数还是很好用的.它的说明为: 搜索与参数表示的对象匹配的元素,并返回相应元素的索引值.如果找到了匹配的元素,从0开始返回:如果没有找到匹配的元素,返回-1.

  • jQuery在ul中显示某个li索引号的方法

    本文实例讲述了jQuery在ul中显示某个li索引号的方法.分享给大家供大家参考.具体分析如下: 这段代码不仅适用于ul和li的元素索引号查找,也适用于其它带有包含关系的元素索引号查找,方法非常的巧妙 $("ul > li").click(function () { // http://www.jb51.net var index = $(this).prevAll().length; //prevAll([expr]): 查找当前元素之前所有的同辈元素 }); 希望本文所述对大

  • jquery获取当前元素索引值用法实例

    jquery获取当前元素索引值用法实例

    本文实例讲述了jquery获取当前元素索引值用法.分享给大家供大家参考.具体如下: 今天在做促销页面的图片轮转效果时,下方页码的左边需要对应显示图片的说明信息,效果如下: 思路: 页面部分当为当前状态的时候,会添加"active"样式. 通过获取 li class="active" 的索引值,对应找到相应的图片说明信息,显示出来. 解决: 通过jquery的 index() 可以很轻松的实现该效果. 代码如下: HTML: <div id="caro

  • jQuery 中$(this).index与$.each的使用指南

    工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否则就XXX) 复制代码 代码如下: $(function(){          $(".bao").hide();           $(".bao").eq(0).show();           $(".head li").click(function(){               $(thi

随机推荐