Question

在下面的代码行中，对set中第一个元素的index（）函数的调用返回1.为什么它不返回0？

var firstBlockIndex = $( '.block' ).first().index();

Answer 1

考虑下面的HTML块：

<div>
    <span></span>
    <span class="block"></span>
    <span class="block"></span>
</div>

然后

$('.block').first().index();

返回1因为

如果没有参数传递给.index（）方法，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。

在<div>块中，有4个<span>标记。具有类“块”的first()是第二个标记。因此，它的索引是1，因为index()是从零开始的（ref）。

演示：JSFiddle

要获取元素相对于所有匹配元素的位置，可以将选择器或元素传递给index()以获取集合中某些缩小选择器的索引。考虑这个HTML块：

<div>
    <span></span>
    <span class="block"></span>
    <span class="block"></span>
    <span class="block special"></span>
</div>

然后

$('.block').index( $(".special") ));

将返回2，因为具有“特殊”类的跨度是“块”类的元素组中的第3个元素。

演示：JSFiddle

Answer 2

index()返回元素相对于其兄弟元素的索引，而不是相对于其他所选元素的索引（参见documentation）。

添加了代码段以显示行为：

＆＃13;

$(function() {
  $('#result').text($('li.block').first().index());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="firstList">
  <li class="noblock">First item</li>
  <li class="block">Second item</li>
  <li class="noblock">Third item</li>
</ul>
<ul id="secondList">
  <li class="noblock">First item</li>
  <li class="block">Second item</li>
  <li class="noblock">Third item</li>
</ul>

Index of first li.block element:
<span id="result"></span>

＆＃13;

为什么JQuery index（）为第一个元素返回1？

2 个答案: