Question

我想知道li元素的索引，它只有哪一类。

<ul>
    <li style="display: none;">don't need this one</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
</ul>

$('ul').each(function () {
    $(this).on('click', 'li.li', function () {
        alert($(this).index());
    });
});

http://jsfiddle.net/oobkzyat/2/

我的问题是索引不是从0开始。我该怎么办？

Answer 1

是否显示元素。它将成为索引的一部分，这是它给你1而不是0的原因，因为0是你隐藏的元素的索引（<li style="display: none;">don't need this one</li>）。但是下面是您要求的代码。

$('ul').each(function () {
    $(this).on('click', 'li.li', function () {
      alert($(this).index()-$(this).prevAll(":hidden").length);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
    <li style="display: none;">don't need this one</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
</ul>

Answer 2

如果查看documentation，您会注意到使用index（）的另一种方式：.index() can search for this list item within the set of matched elements。以下是如何使用它的示例：

＆＃13;

$('ul').each(function () {
  
  var classLi = $(this).find('> li.li');
  // get direct children with class "li"
  
  classLi.on('click', function () {
    alert(classLi.index(this));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
    <li style="display: none;">don't need this one</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
    <li class="li">sdsds</li>
</ul>

＆＃13;

Answer 3

您的索引从1开始，因为0元素没有class =＆＃34; li＆＃34;在上面。返回的第一个元素是第一个类=＆＃34; li＆＃34;但那是ul中的第二部分。

编辑：如果你想忽略几个（未知数量）隐藏的li，你可以做这样的事情

    $('ul').on('click', 'li.li', function(){
      var counter = 0;
      var clickIndex = $(this).index();
      // uses an ID on the ul in case there are other li on page
      $('#topUL').find('li').each(function(){
          if( $(this).index() < clickIndex && !$(this).hasClass('li') )
             counter++;
      });
      alert(clickIndex - counter);

    });

Answer 4

您需要使用以下方法查询可见元素：visible selector。

alert($(this).siblings(":visible").andSelf().index(this));

我已经更新了你的小提琴 http://jsfiddle.net/oobkzyat/3/

按类分类的jquery

4 个答案: