Il motto di jQuery è “Write less, do more”, anche se gli ultimi anni stiamo vedendo uno shifting di molte soluzioni verso il Javascript puro, il cosiddetto vanilla.
Vediamo, sia per scopo didattico che di utilizzo come costruire un’alternativa al popolare metodo index(), che restituisce la posizione, come indice appunto, di un elemento rispetto ai suoi fratelli.
Partiamo da una struttura html come questa:
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>Come sappiamo l’index parte da 0, quindi volendo ottenere l’indice dell’elemento #bar dovremmo scrivere questo:
console.log( $(‘#bar’).index() ); // 1
Come possiamo farlo in vanilla Javascript?
function indexInParent(node) {
var children = node.parentNode.childNodes;
var num = 0;
for (var i=0; i<children.length; i++) {
if (children[i]==node) return num;
if (children[i].nodeType==1) num++;
}
return -1;
}
console.log( indexInParent(document.getElementById('bar')) );Analogamente al metodo index() di jQuery, la nostra funzione restituisce -1 se non ha trovato l’elemento.
