Question

我正在尝试使用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>

JS：

    jQuery( document ).ready(function( $ ) {

    $("#buttons > #next").click(function (){
        var items = $(".gallery-item");

        var index = items.find(".active").index();
        $("#console").append("index : " + index + "<br />");

        var indexWithSelector = items.index(".active");
        $("#console").append("index with selector : " + indexWithSelector + "<br />");

        var prevAll = items.prevAll(".gallery-item").size();
        $("#console").append("prevall : " + prevAll + "<br />");

        $.each(items, function(index, val) {
            $("#console").append("<br />" + val.className);
        });
    });

});

我希望所有结果都相同：1，因为活动元素是从零开始的列表中的第二个。但我明白了：

index : -1
index with selector : -1
prevall : 3

gallery-item
gallery-item active
gallery-item
gallery-item

为什么呢？难道我做错了什么？

这是CodePen：http://codepen.io/anon/pen/meiBA

更新：

我试图直接找到活动元素并使用index来找到它的位置并且它有效。我试过这个：

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

Answer 1

我已经在jsfiddle中测试了你的代码。我发现你得到-1，因为你试图找到的元素索引在那个上下文中不存在：

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

这里items.find将只返回空的jquery对象。你试图在gallery项的子项中找到活动类。但是活动类与其他gallery-item处于同一级别。所以代码应该是像这样：

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

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

index : -1

现在让我们谈谈这个：

index with selector : -1

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

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

在这里，您正在.active类的集合中找到$（＆＃34; .gallery-item＆＃34;）。这没有任何意义。因为.active是gallery-item的一部分。

搜索应该是这样的：

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

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

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

这里你试图获得所有以前项目的大小。项目的大小是4，即$（＆＃34; .gallery-item＆＃34;），它返回你的大小4-1 = 3是对的。

如果您尝试获取活动类的prev gallery项，则代码应为：

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

所以正确的输出如下：

index : 1 
index with selector : 1
prevall : 1

最后但并非最不重要的是jsfiddle。我也评论了你的代码，以便你可以评论我的并检查效果：

DEMO : JS FIDDLE

Answer 2

var index = items.find(".active").index();无法正常工作，因为find（）方法找不到它的内容，所以你可以使用hasClass()方法：

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

Answer 3

你应该使用

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

而不是

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

这是一个工作示例 - http://jsfiddle.net/rMLNH/1/

jquery使用selector查找元素的索引

3 个答案: