jQuery-从具有特定类的元素列表中获取单击项的索引

Question

我有以下格式的元素集合：

<div class="row feed">

    <div class="col-sm-4 inner"><span></span></div>
    <div class="col-sm-4 inner"><span></span></div>
    <div class="col-sm-4 inner"><span></span></div>

    <div class="clearfix visible-sm"></div>

    <div class="col-sm-4 inner"><span></span></div>
    <div class="col-sm-4 inner"><span></span></div>
    <div class="col-sm-4 inner"><span></span></div>

    <div class="clearfix visible-sm"></div>

</div>

单击span时，我试图获取父级的索引。 这可以正常工作，但是如果我单击第四，第五或第六，则该数字不正确，因为它会将clearfix div计为索引。

我不能简单地将1加到结果中，因为这种格式是动态的并且会不断增长，因此数学运算可能会很快变得复杂。

相反，有一种方法可以指定只获取某些对象的索引，我认为以下内容可能会实现我想要的功能，但似乎没有？

$(document).on("click", ".feed .inner span", function(){

    var activeElement = $(this).parent();

    console.log($(".feed:not(.clearfix)").index(activeElement));
});

但这只给出-1 ，这意味着找不到元素。

Answer 1

是的，使用jQuery的.index()函数，您可以传递参数来告诉它获取相对于一组元素的索引。

 $(document).on("click", ".feed .inner span", function() { console.log($(this).parent().index('div.col-sm-6.inner')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="row feed"> <div class="col-sm-6 inner"><span>1</span></div> <div class="col-sm-6 inner"><span>2</span></div> <div class="col-sm-6 inner"><span>3</span></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 inner"><span>4</span></div> <div class="col-sm-6 inner"><span>5</span></div> <div class="col-sm-6 inner"><span>6</span></div> <div class="clearfix visible-sm"></div> </div> 

根据.index()的文档：

如果没有参数传递给.index()方法，则返回值是一个整数，指示jQuery对象中第一个元素相对于其同级元素的位置。

如果在元素集合上调用了.index() ，并且传入了DOM元素或jQuery对象，则.index()返回一个整数，该整数指示所传递的元素相对于原​​始集合的位置。

如果将选择器字符串作为参数传递，则.index()返回一个整数，该整数指示jQuery对象中第一个元素相对于选择器匹配的元素的位置。 如果找不到该元素，则.index()将返回-1。

Answer 2

尝试将其更改为

console.log(activeElement.index(".inner"));

Answer 3

这是因为clicked元素的父元素在$(".feed:not(.clearfix)")集合中不存在。 您应该选择.feed元素的.feed而不是.feed元素。 一种选择是：

$(".feed > div:not(.clearfix)").index(activeElement);

Answer 4

你近了 您需要获取相对于.feed元素的直接子元素的索引。

的父元素this是不是在收集根.feed:not(.clearfix)因此，你需要选择的直接孩子.feed代替。 这样，索引将相对于.feed的直接子元素而不是.feed本身。

在下面的示例中，使用直接子选择器> ：

$(document).on("click", ".feed .inner span", function() {
    var index = $(".feed > :not(.clearfix)").index($(this).parent());
});

Answer 5

为什么只尝试向HTML添加属性

那么您只需要这样的东西$（“ [data-index ='1']”）