JavaScript: come implementare il metodo prevAll() di jQuery

Il metodo prevAll() di jQuery restituisce tutti gli elementi che precedono 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 precedente a quello di partenza è previousElementSibling. Ovviamente l'elemento precedente deve esistere.

Implementiamo quindi la seguente funzione utilizzando un ciclo while:

'use strict';

const prevAll = element => {
    const siblings = [];
    if(element === null || !element) {
        return siblings;
    }
    while(element.previousElementSibling !== null) {
        element = element.previousElementSibling;
        siblings.push(element);
    }
    return siblings;
};

Consideriamo la seguente struttura:

<ul id="list">
	<li>...</li>
	<li>...</li>
	<li class="current">...</li>
</ul>

Volendo selezionare le voci di lista che precedono la terza scriveremo:

const thirdItem = document.querySelector('#list .current');
const siblings = prevAll(thirdItem);

Noterete che la nostra funzione è abbastanza semplice da usare.