JS - 我可以得到下一個打開的 div 元素 - 不是兄弟

Question

是否可以僅使用 JS（或可能使用 jQuery）來獲取下一個open的 html 元素？

在下面的代碼段中，如果我單擊任何div ，它會給我該 div 的id 。 我希望它獲得下一個開放元素 id，例如

如果我點擊page123它應該給我123efter如果我點擊123efter它應該給我13

我不希望封裝div中的下一個兄弟姐妹，這是我迄今為止所做的一切！

 document.addEventListener("click", function(event) { console.log(event.target.id); } );

 .efter{ min-height:20px; } .efter:hover{ background-color:beige; }

 <div> <div id="1"> home <div id="1efter" class="efter"></div> <div id="11"> page11 <div id="11efter" class="efter"></div> </div> <div id="12"> page12 <div id="12efter" class="efter"></div> <div id="121"> page121 <div id="121efter" class="efter"></div> </div> <div id="122"> page122 <div id="122efter" class="efter"></div> </div> <div id="123"> page123 <div id="123efter" class="efter"></div> </div> </div> <div id="13"> page13 <div id="13efter" class="efter"></div> </div> </div> </div>

Answer 1

我首先創建一個包含所有現有 div id的平面數組divs 。 然后在 click 事件處理程序中查找被點擊元素的后繼id 。

 const divs=[...document.body.querySelectorAll("div")].map(d=>d.id); document.addEventListener("click", function(event) { console.log(divs[divs.indexOf(event.target.id)+1]); } );

 .efter{ min-height:20px; } .efter:hover{ background-color:beige; }

 <div> <div id="1"> home <div id="1efter" class="efter"></div> <div id="11"> page11 <div id="11efter" class="efter"></div> </div> <div id="12"> page12 <div id="12efter" class="efter"></div> <div id="121"> page121 <div id="121efter" class="efter"></div> </div> <div id="122"> page122 <div id="122efter" class="efter"></div> </div> <div id="123"> page123 <div id="123efter" class="efter"></div> </div> </div> <div id="13"> page13 <div id="13efter" class="efter"></div> </div> </div> </div>

Answer 2

作為替代方案，並且標記為jquery ，您可以使用 jquery 的collection.index(element)重載來獲取集合中的索引。

作為一個班輪：

console.log($("div").eq($("div").index(this) + 1))

更新片段：

 $("div").click(function(evt) { evt.stopPropagation(); // Get once so it's not run multiple times var divs = $("div"); var idx = divs.index(this); var result = divs.eq(idx+1) // do something to demo console.log(idx, result.attr("id")); $(".active").removeClass("active"); result.addClass("active"); });

 .efter{ min-height:20px; } .efter:hover{ background-color:beige; } .active { background-color:yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div id="1"> home <div id="1efter" class="efter"></div> <div id="11"> page11 <div id="11efter" class="efter"></div> </div> <div id="12"> page12 <div id="12efter" class="efter"></div> <div id="121"> page121 <div id="121efter" class="efter"></div> </div> <div id="122"> page122 <div id="122efter" class="efter"></div> </div> <div id="123"> page123 <div id="123efter" class="efter"></div> </div> </div> <div id="13"> page13 <div id="13efter" class="efter"></div> </div> </div> </div>