JS - Can I get the next open div element - Not the sibling-CodePudding

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" ></div>
    <div id="11">
      page11
      <div id="11efter" ></div>
    </div>
    <div id="12">
      page12
      <div id="12efter" ></div>
      <div id="121">
        page121
        <div id="121efter" ></div>
      </div>
      <div id="122">
        page122
        <div id="122efter" ></div>
      </div>
      <div id="123">
        page123
        <div id="123efter" ></div>
      </div>
    </div>
    <div id="13">
      page13
      <div id="13efter" ></div>
    </div>
  </div>
</div>

CodePudding user response：

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" ></div>
    <div id="11">
      page11
      <div id="11efter" ></div>
    </div>
    <div id="12">
      page12
      <div id="12efter" ></div>
      <div id="121">
        page121
        <div id="121efter" ></div>
      </div>
      <div id="122">
        page122
        <div id="122efter" ></div>
      </div>
      <div id="123">
        page123
        <div id="123efter" ></div>
      </div>
    </div>
    <div id="13">
      page13
      <div id="13efter" ></div>
    </div>
  </div>
</div>

CodePudding user response：

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" ></div>
    <div id="11">
      page11
      <div id="11efter" ></div>
    </div>
    <div id="12">
      page12
      <div id="12efter" ></div>
      <div id="121">
        page121
        <div id="121efter" ></div>
      </div>
      <div id="122">
        page122
        <div id="122efter" ></div>
      </div>
      <div id="123">
        page123
        <div id="123efter" ></div>
      </div>
    </div>
    <div id="13">
      page13
      <div id="13efter" ></div>
    </div>
  </div>
</div>