如何獲得DOM內部深元素的索引

Question

有無論如何，我可以知道哪個鏈接相對於div.grid在以下html中單擊了？

<div class="grid"> 
    <figure class='grid-item'> 
    <figcaption> 
     <a>link</a> 
    </figcaption> 
    </figure> 
    <figure class='grid-item'> 
    <figcaption> 
     <a>link</a> 
    </figcaption> 
    </figure> 
    <figure class='grid-item'> 
    ..... 
    </figure> 
    .... 
</div> 

我想：

index = $('div.grid').index(this); // returns -1 on every link 
index = $(this).parent().parent().parent().index(this); // returns -1 
index = $(this).index(); // returns 2 on every link 

但在前兩種情況下返回-1每一個環節上，並在第三個2（總是在每一個環節）。

Answer 1

應該

var index = $(this).closest('.grid-item').index(); 

對於演示：

$('a').click(function(){ 
 
    var index = $(this).closest('.grid-item').index(); 
 
    alert(index); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="grid"> 
 
    <figure class='grid-item'> 
 
    <figcaption> 
 
     <a>link</a> 
 
    </figcaption> 
 
    </figure> 
 
    <figure class='grid-item'> 
 
    <figcaption> 
 
     <a>link</a> 
 
    </figcaption> 
 
    </figure> 
 
    <figure class='grid-item'> 
 
    <figcaption> 
 
     <a>link</a> 
 
    </figcaption> 
 
    </figure> 
 
</div>

Answer 2

如果你得到的所有鏈接的集合，然後你可以得到基於該集合的索引：

// Gather all the links in the section into an array: 
 
var links = Array.prototype.slice.call(document.querySelectorAll(".grid a")); 
 

 
// Set up an event handler for them: 
 
links.forEach(function(link){ 
 
    link.addEventListener("click", function(){ 
 
    // Just get the current link's position in the array 
 
    console.log(links.indexOf(this)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="grid"> 
 
    <figure class='grid-item'> 
 
    <figcaption> 
 
     <a>link</a> 
 
    </figcaption> 
 
    </figure> 
 
    <figure class='grid-item'> 
 
    <figcaption> 
 
     <a>link</a> 
 
    </figcaption> 
 
    </figure> 
 
    <figure class='grid-item'> 
 
    <figcaption> 
 
     <a>link</a> 
 
    </figcaption> 
 
    </figure> 
 
</div>

Answer 3

您需要檢索父人物元素的索引。不是錨標籤的索引。

jQuery(document).on("click", ".grid a", function() { 
 
    var figure = jQuery(this).parent().parent(); 
 
    
 
    //Retrieve the index of the figure. 
 
    var index = jQuery(figure).index(); 
 
    
 
    alert(index); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="grid"> 
 
    <figure class='grid-item'> 
 
    <figcaption> 
 
     <a>link</a> 
 
    </figcaption> 
 
    </figure> 
 
    <figure class='grid-item'> 
 
    <figcaption> 
 
     <a>link</a> 
 
    </figcaption> 
 
    </figure> 
 
    <figure class='grid-item'> 
 
    </figure> 
 
</div>