在Javascript中找出元素的n

Question

我有一堆 div。

<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 中单击了 a 元素。

必须返回一个整数，基于 div a 元素被点击（第一个、第二个、第三个或第四）.

Answer 1

使用 Array.prototype.forEach、.querySelectorAll 和 .addEventListener 的原生 JavaScript 实现。

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

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>有很多<a>s

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>
            }
        );
    }
);

注意记录的索引将从0 开始为第一个。

Answer 2

您应该使用.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 3

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