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时尝试获取父级的索引。这工作正常，但如果我点击第4个，第5个或第6个，那么数字是不正确的，因为它将clearfix div计为索引。

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

相反，有没有办法指定只获取某些对象的索引，我认为以下可能会做我想要的但是它似乎没有？

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

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

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

但这只是-1，这意味着找不到任何元素。

Answer 1

尝试将其更改为

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

Answer 2

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

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

Answer 3

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

this的父元素不在集合.feed:not(.clearfix)的根目录中，因此您需要选择.feed的直接子元素。在这样做时，索引将相对于.feed而不是.feed本身的直接子元素。

在下面的示例中，使用了直接child selector, >：

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

Answer 4

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

根据.index()的文档：

如果没有向.index()方法传递参数，则返回值为   一个整数，表示第一个元素在其中的位置   jQuery对象相对于它的兄弟元素。

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

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

Answer 5

为什么你只尝试在html中添加属性

然后你只需要这样的东西$（＆＃34; [data-index =＆＃39; 1＆＃39;]＆＃34;）

jQuery - 从具有特定类

5 个答案: