Question

我尝试了解jQuery对象访问器index()的工作原理。但我什么都不懂！（见http://jsfiddle.net/St4D7/）

所以我有一个HTML列表项：

<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>

和jQuery：

$('ul li').click(function(){
    console.log($(this).index());
});

我希望点击项目的索引位置（如1,2或3），这就是全部。请帮忙。

PS：我不想使用each()或eq() ...只是index()。

Answer 1

如documentation中所述，index在您调用它的jQuery对象中，根据您提供的参数返回第一个元素的零索引位置。

但是，您似乎也在this。

的背景下滑倒

当您致电$(this).index()时，this指向点击的li l元素。因此$(this)包含一个包含一个元素的jQuery对象。

相反，尝试这样的事情：

var obj = $('ul li').click(function(){
    console.log(obj.index(this));
});

Answer 2

您需要将其包装在准备好的文档中，并选择jQuery作为左侧的javascript库。这是一个工作示例：http://jsfiddle.net/keroger2k/St4D7/3/

Answer 3

在源代码中查看有助于：

index: function( elem ) {
  if ( !elem || typeof elem === "string" ) {
    return jQuery.inArray( this[0],
      // If it receives a string, the selector is used
      // If it receives nothing, the siblings are used
      elem ? jQuery( elem ) : this.parent().children() ); // <-- here
  }
  // Locate the position of the desired element
  return jQuery.inArray(
    // If it receives a jQuery object, the first element is used
    elem.jquery ? elem[0] : elem, this );
},

如您所见，index()调用了inArray()，它会返回一个数字。

当你不提出任何争论时，它会分支到if并有效地调用

return jQuery.inArray(this[0], this.parent().children());

在您的情况下，this[0]是有问题的<li>，this.parent().children()是父<ul>的所有孩子。 inArray()返回相应的位置。

这不是一种非常有效的方法，与each()回调的索引参数相比，它也会产生不同的结果，因为index()查看所有孩子们：

<div>
  <p>A paragraph</p>
  <hr>
  <p>Another paragraph</p>
</div>

// this logs 0, 1 
$("div p").each(function (i) {
  console.log(i)
});

// this logs 0, 2 (!) 
$("div p").each(
  console.log( $(this).index() );
});

Jquery：index（）如何工作？

3 个答案: