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

A one-liner for finding the index of an element that has certain class within a jQuery set of elements?

本文关键字：元素 索引 代码 单行 查找 jQuery 集中 用于      更新时间：2023-09-26

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

<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');.你能建议一下吗？

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

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

您也可以使用 index 方法，但随后您必须首先获取要查找的元素，因此这意味着您要查找它两次：

var index = $jQueryObject.index($jQueryObject.filter('.highlighted'));
您可以使用

$.index函数

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

我有用：

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

JSFIDDLE 演示

相关文章：