¿Es posible usar solo JS (o posiblemente con jQuery) para obtener el siguiente elemento html open ?
En el fragmento a continuación, si hago clic en cualquier div , me dará la id de ese div. Quiero que obtenga la siguiente identificación de elemento abierto, por ejemplo
si hago clic en la page123 debería darme 123efter si hago clic en 123efter debería darme 13
No quiero al próximo hermano dentro del div encapsulador, ¡que es todo lo que he logrado hacer hasta ahora!
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>Primero creo una matriz plana de divs con todos los div id s existentes. En el controlador de eventos de clic, luego busco la id del sucesor del elemento en el que se hizo clic.
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>Como alternativa, y como jquery etiquetado, puede usar la sobrecarga de jquery collection.index(element) para obtener el índice dentro de una colección.
Como una sola línea:
console.log($("div").eq($("div").index(this) + 1))Fragmento actualizado:
$("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>