jquery使用选择器查找元素的索引

我正在尝试使用jQuery的.index（）函数，我可以了解它是如何工作的。结果不是我所期望的。下面是一个我不明白的小例子：

Html:

<div id="gallery">
  <div class="gallery-item">item 1</div>
  <div class="gallery-item active">item 2</div>
  <div class="clearfix visible-lg"></div>
  <div class="gallery-item">item 3</div>
  <div class="gallery-item">item 4</div>
</div>

<div id="buttons">
  <button id="next">next</button>
</div>
<span id="console">
</span>

为什么?？我做错什么了吗

在代码笔上：

更新：

我试图直接找到活动元素，并使用索引来找到它的位置，结果成功了。我试过这个：

var active = $(".gallery-item.active");
var index = items.index(active);
//index == 1

---

var index=items.find（“.active”）.index（）

不起作用，因为find（）方法查找它的内容而不是它的类，所以您可以使用方法：

你应该使用

items.index($("div.active"));

而不是

items.find(".active").index();

---

下面是一个工作示例-

我已经在JSFIDLE中测试了您的代码。我发现您得到了-1，因为您尝试查找的元素索引在该上下文中不存在：

 var items = $(".gallery-item");        
 var index = items.find(".active").index();

此处items.find将只返回空的jquery对象。您正在尝试在gallery项的子项中查找活动类。但活动类与其他gallery-item处于同一级别。因此代码应如下所示：

 var index = items.filter(".active").index();

 var indexWithSelector = items.filter(".active").index(".gallery-item");

这就是您得到-1的原因。因为没有元素，所以索引返回为-1

index : -1

现在让我们谈谈这个：

index with selector : -1

此-1背后的原因是以下代码：

var indexWithSelector = items.index(".active");

var prevAll = items.prevAll(".gallery-item").size();

在这里，您可以在

.active

类的集合中找到

$（“.gallery item”）

。这毫无意义。 As

。active

是库项目的一部分

搜索应如下所示：

 var index = items.filter(".active").index();

 var indexWithSelector = items.filter(".active").index(".gallery-item");

现在让我们检查以下代码：

var indexWithSelector = items.index(".active");

var prevAll = items.prevAll(".gallery-item").size();

您正在尝试获取以前所有项目的大小。其中项目的大小为4，即

$（“.gallery item”）

，它将返回正确的大小4-1=3

如果您试图获取

活动

类的上一个

库项目

，则代码应为：

var prevAll = items.filter(".active").prevAll(".gallery-item").size();

因此，正确的输出如下所示：

index : 1 
index with selector : 1
prevall : 1

最后但并非最不重要的一点是JSFIDLE。我也对您的代码进行了注释，以便您可以对我的代码进行注释并检查效果：

---

如果hasClass返回一个布尔值，那么它就可以工作了，现在你能告诉我为什么索引（“带有选择器”）；不是为我做的吗？实际上是items.index（$（“div.active”）；表示在items中查找$（“div.active”）（这是jQuery元素）的索引。但是items.find（“.active”）.index（）；在items中表示find（'.active'）（这是一个HTMLDOM元素而不是jquery元素）。所以jquery元素和简单dom元素的区别就在于此了。谢谢您的完整回答。我猜我误用了find和index函数。我不知道普雷瓦尔会在名单上写什么。非常感谢。有点奇怪，我可以找到活动对象，将其传递到items集合的index函数中，并在无法使用选择器时使其工作。直觉会让我相信，集合上的.index（“带有选择器”）将为我提供与调用该方法的集合中的选择器匹配的第一个元素的索引。我建议您检查index（选择器）的api。这将给你一个清晰的画面。这里的选择器是元素的集合，我们检查该集合中元素的索引。希望我回答了你的问题。我建议你检查索引的api（选择器）。它会给你一个清晰的画面。这里的选择器是元素集合，我们检查该集合中元素的索引。希望我回答了你的问题