jquery中index()

jquery中index()

index() 方法返回指定元素相对于其他指定元素的 index 位置。

一、语法

$(selector).index( [ element] )

其中:element 为可选,表示指定元素的对象。

二、index()使用时注意事项

1、索引值从0开始计数

2、如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

3、如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。

4、如果参数为String类型,则将其视作选择器,返回当前jQuery对象的第一个元素在选择器所匹配的元素中的索引位置。如果该选择器不匹配任何元素或者当前jQuery对象的第一个元素不在匹配到的元素内,则返回-1。

四、index()实例

1、

  •  
  • HTML 代码   复制
  • 
    <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    
    <script>
    
    $('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
    $('li').index($('#bar')); //1,传递一个jQuery对象
    $('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
    $('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的做引位置
    $('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。  
    
    </script>
    			

     

  • 2、

  •  
  • HTML 代码   复制
  • 
    <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    
    <script>
    
    $('#bar').index() //返回值是1,而不是0
    
    </script>
    
    
    			

    //原因:

       // 因为不传入参数,index()返回的是与('#bar')同辈的位置,而在上述例子当中li是与下面的li同辈的,所以返回值是1

     

  • 3、

  •  
  • HTML 代码   复制
  • 
    <li id="n1">
        <li id="n2">
            <span id="n3"></span>
            <ul id="n4">
                <li id="n5">item1</li>
                <li id="n6">item2</li>
                <li id="n7">item3</li>
            </ul>
            <span id="n8"></span>
        </li>  
    </li>
    
    
    <script>
    
    // 省略参数: 返回第一个li元素在所有同辈元素中的索引
    document.writeln( $("li").index( ) ); // 0
    
    
    // 参数为DOM元素: 返回n6在$li中的索引
    document.writeln( $("li").index( document.getElementById("n6") ) ); // 1
    
    
    // 参数为jQuery对象: 返回$("#n7")在$li中的索引
    document.writeln( $("li").index( $("#n7") ) ); // 2
    
    
    // 参数为选择器字符串: 返回$li中的第一个元素(即n5)在选择器"#n4"所匹配的元素中的索引
    // 选择器"#n4"匹配的元素只有n4一个,没有n5,因此返回-1
    document.writeln( $("li").index( "#n4" ) ); // -1
    
    
    // 省略参数:n4在同辈元素中的索引,n4之前的同辈元素有一个n3,因此返回索引为1
    document.writeln ( $("#n4").index( ) ); // 1
    
    
    // 参数为选择器字符串:n8在选择器"span"所匹配的元素中的索引
    // 选择器"span"匹配n3、n8两个元素,n8是其中的第二个元素,因此返回索引为1
    document.writeln ( $("#n8").index( "span" ) ); // 1
    
    </script>
    				

     

  • 标签: