JavaScript: ottenere tutti gli elementi successivi ad un dato elemento

In JavaScript possiamo ottenere tutti gli elementi successivi ad un dato elemento.

Il metodo .nextAll() di jQuery restituisce tutti gli elementi che seguono un determinato elemento nell'albero del documento. Possiamo implementare qualcosa di simile in JavaScript.

Nel DOM la proprietà che ci permette di accedere al nodo successivo a quello di partenza è nextSibling. Ovviamente l'elemento successivo deve esistere e deve essere un nodo elemento.

Implementiamo quindi la seguente funzione utilizzando un ciclo while:

'use strict';

const nextAll = element => {
	let siblings = [];
	while (element.nextSibling) {
		element = element.nextSibling;
		if (element !== null && element.nodeType == 1) {
			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:

let firstItem = document.querySelector('#list li.current');
let nexts = nextAll(firstItem); // [HTMLElement, HTMLElement]

Noterete che la nostra funzione è abbastanza semplice da usare.