javascript - 获取 div 子 ID

Question

我有一个包含其他 div 的 div，如下所示：

<div id="main_div">

  <div id="div_1">
    <div id="some_id"></div>
  </div>

  <div id="div_2">
    <div id="some_id"></div>
  </div>

  <div id="div_3">
    <div id="some_id"></div>
  </div>

</div>

单击特定 div 时，如何以编程方式获取下一个 div id？

div_1 is clicked -> alert div_2
div_2 is clicked -> alert div_3

谢谢

Answer 1

如果你可以使用 jQuery，你应该这样做。使用下一个功能

$("#main_div > div").on("click", function(){
  alert($(this).next("div").attr("id"));
});

Answer 2

你可以用Node.nextSibling

返回其父节点的 childNodes 列表中紧跟指定节点之后的节点，如果指定节点是该列表中的最后一个节点，则返回 null。

Answer 3

var div = document.getElementById('main_div');

for (var i=0, len=div.children.length; i<len; i++) {
    div.children[i].addEventListener('click', function(e) {
        var nextSib = e.target.nextSibling;

        if (nextSib) alert(nextSib.id);
    }, false);
}