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']”）