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

jQuery: why does index() return -1 after dynamically changing DOM?

本文关键字：DOM 改变 返回 动态 为什么 index jQuery      更新时间：2023-09-26

我有一个简单的列表:

<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'

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


.index ()此签名不接受任何参数。

。索引(选择器)
一个选择器，代表一个jQuery集合，在其中查找元素。

。索引(元素)
jQuery对象中要查找的DOM元素或第一个元素。

试试这个:

$(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);
});

裁判:http://api.jquery.com/index/

Try This For Find Selected Index. 

$(document).on('click',function(){

$('li:nth-child(2)').addClass('selected');
      $('li').each(function(index, element) {
       if($(this).hasClass('selected'))
       {
            alert('selected item is at index '+index);
       }
        });
    });
相关文章：