javascript - jQuery:为什么 index() 在动态更改 DOM 后返回 -1？

Question

我有一个简单的列表:

<ul>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>   

还有一些 jQuery 可以将类添加到其中一个元素，然后返回该元素在列表中的位置。

$(document).on('click',function(){
  $('li:nth-child(2)').addClass('selected'); // select the second item (this number varies in the actual code)
  index = $('li').index('.selected');
  alert('selected item is at index '+index);
});

我认为这应该打印出 'selected item is at index 1' ，而是打印出 'selected item is at index -1' .

此处演示:http://codepen.io/anon/pen/cvnok

谁能解释一下为什么会发生这种情况？

---

编辑

奇怪的观察:如果你改变$('li:nth-child(2)')至 $('li:nth-child(1)') , 然后函数打印出 'selected item is at index 0' .

Answer 1

jquery .index()将在三种情况下起作用。

.index()
This signature does not accept any arguments.

.index( selector )
A selector representing a jQuery collection in which to look for an element.

.index( element )
The DOM element or first element within the jQuery object to look for.

试试这个:

$(document).on('click',function(){
  $('li:nth-child(2)').addClass('selected'); // select the second item (this number varies in the actual code)
  index = $('li').index($('.selected')); // this will search for element with class selected.
  alert('selected item is at index '+index);
});

DEMO

引用:http://api.jquery.com/index/