得到li的索引有一个类,没有另一个类

Question

我有下面的代码来找到li的索引,active并且没有hidden类.为了找到我们不想算hidden上课的价值.

var index = $('li').not('.hidden').find('.active').index();
alert(index)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="hidden">.....</li>
  <li>....</li>
  <li class="hidden">....</li>
  <li class="active">....</li>
  <li>....</li>
  <li class="hidden">....</li>
  <li>....</li>
 </ul>

在这里我得到结果-1.但我的预期结果是1.是否有可能找到这个？

Answer 1

您可以使用.filter(),它在相同级别搜索,即匹配元素的子集,其中.find()查看后代元素

var index = $('li').not('.hidden').filter('.active').index();

或者,它可以改进为

var index = $('li.active:not(.hidden)').index();

如果需要排除.hidden,则需要将其从无序列表中删除,然后.index()才能使用.

var index = $('ul').clone().find('li.hidden').remove().end().find('li.active').index();

var index = $('ul').clone().find('.hidden').remove().end().find('li.active').index();
alert(index)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="hidden">.....</li>
  <li>....</li>
  <li class="hidden">....</li>
  <li class="active">....</li>
  <li>....</li>
  <li class="hidden">....</li>
  <li>....</li>
</ul>