找出Javascript中的元素n

Question

我有一堆divs。

<div id="container"> 

    <div><a>One</a></div> 
    <div><a>Two</a></div> 
    <div><a>Three</a></div> 
    <div><a>Four</a></div> 

</div> 

我必須找出來，使用Javascript和jQuery，在什麼div的，一個元素已被點擊。

必須返回一個整數，基於其中DIV的一個元件已被點擊（第一，第二，第三或第四）。

Answer 1

您應該使用.parent()來從a的div，然後用.index()以獲得其兄弟姐妹之間的位置..

$('#container a').click(function(){ 
    var self = $(this), 
     clickedDiv = self.parent(), 
     index = clickedDiv.index(); 

    alert(index); // first is 0, second is 1 etc... 
}); 

---

的不那麼詳細的語法是

$('#container a').click(function(){ 
    var index = $(this).parent().index(); 

    alert(index); // first is 0, second is 1 etc... 
}); 

Answer 2

var divs = $('#container').on('click', 'a', function() { 
    alert(divs.index(this.parentNode)); 
}).children('div'); 

Answer 3

原生JavaScript工具使用Array.prototype.forEach,.querySelectorAll和.addEventListener。

如果只有一個<a>每<div>

Array.prototype.forEach.call(// for each 
    document.querySelectorAll('#container a'), // <a> in #container 
    function (elm, idx, arr) { // get it's info (index etc.) then 
     elm.addEventListener('click', function() {console.log(idx);}, false); 
      // make clicking it log it's index 
    } 
); 

或者有每<div>

Array.prototype.forEach.call(// for each 
    document.querySelectorAll('#container div'), // <div> in #container 
    function (elm, idx, arr) { // get it's info (index etc.) then 
     Array.prototype.forEach.call(// loop over each 
      elm.querySelectorAll('a'), // <a> in that <div> 
      function (a_elm, a_idx, a_arr) { // and 
       a_elm.addEventListener('click', function() {console.log(idx);}, false); 
        // make clicking it log the index of the <div> 
      } 
     ); 
    } 
); 

注意很多<a>小號登錄指數將從0開始爲1號。