用于查找在jQuery元素集中具有特定类的元素的索引的单线代码？

Question

我有一个像这样的任意结构：

<h2>Foo</h2>
<p>Foo foo</p>
<p>Foofoo</p>

<h2>Bar</h2>

<h2 class=highlighted>Baz</h2>
<p>Baz</p>

<h2>Quux</h2>
<p>Quux quux</p>

在我的JS中，我已经在jQuery对象中包含了所有h2元素：

var $headings = $('h2');

现在，我需要找到那些突出显示类的标题。

因此，对于上述结构，第三个标题将突出显示，因此我希望收到答案2（JS计数从零开始）。

我设法用以下方法解决了这个任务：

function foo($jQueryObject) {
  var number;
  $jQueryObject.each( function(index, element) {
    if ($(element).hasClass('highlighted')) {
      number = index;
      return false;
    }
  });
  return number;
}

演示： http ： //jsbin.com/acaGeJi/1/

但是我敢肯定还有一种更优雅的方法，比如$headings.index('.highlighted'); 。 你能建议一下吗？

Answer 1

您可以使用map方法获取索引：

var index = $jQueryObject.map(function(i, e){
  return e.hasClass('highlighted') ? i : null;
})[0];

您还可以使用index方法，但是随后必须先获取要查找的元素，这意味着您需要对其进行两次查找：

var index = $jQueryObject.index($jQueryObject.filter('.highlighted'));

Answer 2

您可以使用$.index函数

var search = $( ".highlighted" );
alert( "Index: " + $( "h2" ).index( search ) );

Answer 3

这对我有用：

$('.highlighted').index('h2');

jsfiddle演示