JavaScript: come implementare il metodo nextAll() di jQuery

JavaScript: come 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 è nextElementSibling. Ovviamente l'elemento successivo deve esistere.

Implementiamo quindi la seguente funzione utilizzando un ciclo while:


'use strict';

const nextAll = element => {
    const siblings = [];
    if(element === null || !element) {
        return siblings;
    }
    while(element.nextElementSibling !== null) {
        element = element.nextElementSibling;
        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 .current');
const siblings = nextAll(firstItem);

Noterete che la nostra funzione è abbastanza semplice da usare.

Torna su