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

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

更新:

我尝试直接查找事件元素并使用索引来查找它的位置并且它有效。我试过这个:

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 对象。您正在尝试在图库项目的子项目中查找事件类。但是事件类与其他画廊项目处于同一级别。因此代码应该是像这样:

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

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

index : -1

现在我们来谈谈这个:

index with selector : -1

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

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

在这里，您在 .active 类的集合中找到 $(".gallery-item") 。这是没有意义的。 因为 .active 是 gallery-item 的一部分。

搜索应该是这样的:

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

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

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

在这里，您试图获取所有先前项目的大小。其中项目的大小为 4，即 $(".gallery-item") ，它返回您的大小 4-1 = 3 正确的是。

如果您试图获取 active 类的上一个 gallery-item ，那么代码应该是:

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

所以正确的输出将如下所示:

index : 1 
index with selector : 1
prevall : 1

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

DEMO : JS FIDDLE