jQuery index() 方法的两种用法

介绍:

index() 方法返回指定元素相对于其他指定元素的 index 位置。index()的返回值是一个Number类型,从0开始计数。

语法:
$(selector).index(element)
注释:
selector可选。规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。
 

用法:

    1、如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。

例子:

  html代码:

    <ul>
        <li>这是第0个列表</li>
        <li>这是第1个列表</li>
        <li>这是第2个列表</li>
        <li>这是第3个列表</li>
        <li>这是第4个列表</li>
    </ul>

  jquery代码:

    $(function(){
        $(‘ul li‘).click(function(){
            var index=$(this).index();
            alert(index);
        })
    })

   运行结果:点击列表项可获得每个列表项相对于其他列表项的位置,例如点击第1个列表,会弹出如下图的对话框

   2.index()传递参数,index()方法表示获得元素相对于选择器的 index 位置。

例子:

  html代码:

    <ul>
        <li class="list1">这是第0个列表</li>
        <li class=‘list1‘>这是第1个列表</li>
        <li>这是第2个列表</li>
        <li class=‘list1‘>这是第3个列表</li>
        <li>这是第4个列表</li>
    </ul>

jquery代码:

    $(function(){
        $(‘.list1‘).click(function(){
            var index=$(this).index(‘.list1‘);
            alert(index);
        })
    })

运行结果:点击含有list1的列表项弹出当前点击元素相对于list1的位置。比如点击第一个list1会弹出如下结果:

时间: 2024-08-13 06:45:01

jQuery index() 方法的两种用法的相关文章

jquery中 toggleClass方法的一种用法

<html> <head> <script src="js/jquery.js" type="text/javascript"></script> </head> <body> <style> .list_1{color:red} .list_2{color:green} .list_3{color:blue} .list_4{color:#666} </style> &

jQuery返回顶部的两种方法(包括go-top.js)

jQuery实现网页"返回顶部"的功能,相信见到这种效果已经不稀奇了吧;那究竟如何实现呢?方法还是挺多了,先介绍两种简单的: 第一种,只使用jquery插件来实现,下面是一个完整的代码例子,有兴趣的自己摸索吧:前端UI分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

jsp中include的两种用法

JSP中的include的两种用法 1.两种用法 <%@ include file=” ”%> <jsp:include page=” ” flush=”true”/> 2.用法区别 (1)执行时间上区别 <%@ include file=”relativeURI”%>                   是在翻译阶段执行 <jsp:include page=”relativeURI” flush=”true” />  在请求处理阶段执行. (2)引入内容的

创建索引的方法有两种

创建索引的方法有两种:创建表的同时创建索引,在已有表上创建索引. 方法一:创建表的同时创建索引. 使用这种方法创建索引时,可以一次性地创建一个表的多个索引(例如唯一性索引.普通索引.复合索引等),其语法格式与创建的语法格式基本相同(注意粗体字部分的代码). Create  table 表名( 字段名1数据类型 [约束条件] 字段名字2   数据类型 [约束条件] - [unique][fulltext] index [索引名](字段名[(长度)] [asc|desc]) )engine=存储引擎

java中super 的两种用法

通过用 static 来定义方法或成员,为我们编程提供了某种便利,从某种程度上可以说它类似于 C 语言中的全局函数和全局变量.但是,并不是说有了这种便利,你便可以随处使用,如果那样的话,你便需要认真考虑一下自己是否在用面向对象的思想编程,自己的程序是否是面向对象的. 好了,现在开始讨论 this&super 这两个关键字的意义和用法. 在 Java 中, this 通常指当前对象, super 则指父类的.当你想要引用当前对象的某种东西,比如当前对象的某个方法,或当前对象的某个成员,你便可以利用

JSP中的include的两种用法

1.两种用法 <@inlcude file ="header.jsp"/> 此时引入的是静态的jsp文件,它将引入的jsp中的源代码原封不动地附加到当前文件中,所以在jsp程序中使用这个指令的时候file里面的值(即要导入的文件)不能带多余的标签或是与当前jsp文件重复的东西.例如里面不要包含<html><body>这样的标签,因为是把源代码原封不动的附加过来,所以会与当前的jsp中的这样的标签重复导致出错. <jsp:include page

Android---24---Spinner的两种用法

Spinner是一个列表选择框,它有两种用法: 一种是使用android:entries属性的,一种是不使用该属性,通过动态的添加Adapter来实现的. 第一种: MainActivity.java: import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import andr

operator 的两种用法

C++,有时它的确是个耐玩的东东,就比如operator,它有两种用法,一种是operator overloading(操作符重载),一种是operator casting(操作隐式转换). 1.操作符重载C++可以通过operator实现重载操作符,格式如下:类型T operator 操作符 (),比如重载+,比如下面这个例子template<typename T> class A{public:     const T operator+(const T& rhs)     {  

c++ operator操作符的两种用法:重载和隐式类型转换,string转其他基本数据类型的简洁实现string_cast

C++中的operator主要有两个作用,一是操作符的重载,一是自定义对象类型的隐式转换.对于操作符的重载,许多人都不陌生,但是估计不少人都不太熟悉operator的第二种用法,即自定义对象类型的隐式转换,我们下面就用以下这个小例子温故一下这两种用法: 1 #include <iostream> 2 #include <sstream> 3 using namespace std; 4 5 class FuncObj 6 { 7 public: 8 FuncObj(int n):