In JavaScript possiamo selezionare tutti gli elementi DOM successivi ad un dato elemento.
Nel DOM la proprietà che ci permette di accedere al nodo elemento successivo a quello di partenza è nextElementSibling
. Ovviamente l'elemento
successivo deve esistere.
Implementiamo quindi la seguente funzione utilizzando un ciclo while
:
'use strict';
const nextAll = element => {
const siblings = [];
while (element.nextElementSibling) {
element = element.nextElementSibling;
if (element !== null) {
siblings.push(element);
}
}
return siblings;
};
Consideriamo la seguente struttura:
<ul id="list">
<li class="current">...</li>
<li>...</li>
<li>...</li>
</ul>
Volendo selezionare le voci di lista successive alla prima scriveremo:
const firstItem = document.querySelector('#list li.current');
const nexts = nextAll(firstItem);
Noterete che la nostra funzione è abbastanza semplice da usare.