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 demo

用于在jQuery元素集中查找具有特定类的元素的索引的单行程序？

3 个答案: