javascript - 在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元素。

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

Answer 1

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

Answer 2

您应该使用从.parent()中获取，然后使用获取其兄弟姐妹中的位置..diva.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

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

或者如果有很多<a>s<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>
            }
        );
    }
);

注意记录的索引将从01 日开始。