DOM内の要素のインデックスを取得する方法

Question

とにかく、次のhtmlのdiv.gridをクリックしたリンクを知ることができましたか？

<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 

のが、最初の2つの場合には-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>