• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • index()

    从匹配的元素中搜索给定元素的索引值,从0开始计数。

    .index()
    • 这个方法不接受任何参数。
    .index(selector)
    • selector类型: Selector。一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。
    .index(element)
    • element类型: Element, jQuery。将要用于查找的DOM元素,或者jQuery对象中的第一个元素。

    Return Values(返回值)

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

    如果在一组元素上调用.index(),并且参数是一个DOM元素或jQuery对象,.index()返回值就是传入的元素相对于原先集合的位置。

    如果参数是一个选择器,.index()返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则.index()返回-1.

    Detail(细节)

    .get()接受一个索引值参数并返回对应的DOM节点,.index()与其正好相反,接受一个DOM节点然后返回其索引值。假设页面上有个简单的无序列表:

    <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    

    如果我们获取了三个li中的一个元素(例如通过DOM函数,或者事件处理函数中的上下文this),.index()能够在匹配的元素中找到这个列表项:

    var listItem = document.getElementById('bar');
    alert('Index: ' + $('li').index(listItem));
    We get back the zero-based position of the list item:
    

    Index: 1

    类似的,如果我们获得一个jQuery对象,该对象是三个列表项之一,.index()也能用于搜索那个列表项:

    var listItem = $('#bar');
    alert('Index: ' + $('li').index(listItem));
    

    我们就能得到这个li所在的位置,从0开始计数的:

    Index: 1

    注意,如果作为.index()参数使用的jQuery集合含有多个元素,则只会使用第一个:

    var listItems = $('li:gt(0)');
    alert('Index: ' + $('li').index(listItems));
    

    我们得到了匹配的li集合中,第一个元素的位置,从0开始计数。

    Index: 1

    如果我们将一个字符串传递给.index()方法,这个字符串会被解析成jQuery选择器,将会定位到调用.index()的jQuery对象中第一个元素,相对于由这个选择器匹配到的元素集合中的位置:

    var listItem = $('#bar');
    alert('Index: ' + listItem.index('li'));
    

    我们就能得到这个列表项所在的位置,从0开始计数的:

    Index: 1

    如果我们忽略参数,.index()将返回集合中第一个元素相对于其同辈元素的位置:

    alert('Index: ' + $('#bar').index());
    

    又一次,我们得到了这个li从0开始数的位置。

    Index: 1

    例子

    点击后,返回那个div在页面上的索引值(从0开始计数)。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
    div { background:yellow; margin:5px; }
    span { color:red; }
    </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <span>Click a div!</span>
    <div>First div</div>
    <div>Second div</div>
    <div>Third div</div>
    <script>
    $("div").click(function () {
      // this is the dom element clicked
      var index = $("div").index(this);
      $("span").text("That was div index #" + index);
    });
    </script>
     
    </body>
    </html>
    
    Click a div!
    First div
    Second div
    Third div

    返回ID为bar的元素的索引值。

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    <div></div>
    <script>var listItem = $('#bar');
        $('div').html( 'Index: ' + $('li').index(listItem) );</script>
     
    </body>
    </html>
    
    • foo
    • bar
    • baz

    返回jQuery集合中第一项的索引值。

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    <div></div>
    <script>var listItems = $('li:gt(0)');
    $('div').html( 'Index: ' + $('li').index(listItems) );
    </script>
     
    </body>
    </html>
    
    • foo
    • bar
    • baz

    返回ID为bar的元素相对于所有<li>元素的索引值。

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    <div></div>
    <script>$('div').html('Index: ' +  $('#bar').index('li') );</script>
     
    </body>
    </html>
    

    返回ID为bar的元素相对于同辈的索引值。

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    <div></div>
    <script>var barIndex = $('#bar').index();
    $('div').html( 'Index: ' +  barIndex );</script>
     
    </body>
    </html>
    

    由于没有元素的ID为foobar,所以返回-1。

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
      <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    <div></div>
    <script>var foobar = $("li").index( $('#foobar') );
    $('div').html('Index: ' + foobar);</script>
     
    </body>
    </html>
    
    • foo
    • bar
    • baz

    上篇:get()

    下篇:toArray()