JavaScript: implementare il metodo nextAll() di jQuery

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:

var nextAll = function(element) {
	var 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:

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

Noterete che la nostra funzione è abbastanza semplice da usare.