Is it possible using just JS (or possibly with jQuery) to get the next open html element?
In the snippet below, if I click on any div it'll give me the id of that div. I want it to get the next open element id, so e.g.
if I click on page123 it should give me 123efter
if I click on 123efter it should give me 13
I don't want the next sibling within the encapsulating div, which is all I've managed to do so far!
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>I first create a flat array divs with all existing div ids. In the click event handler I then look up the clicked element's successor 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>As an alternative, and as tagged jquery, you can use jquery's collection.index(element) overload to get the index within a collection.
As a one liner:
console.log($("div").eq($("div").index(this) + 1))
Updated snippet:
$("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>