JavaScript: selezionare i nodi fratelli

In jQuery abbiamo il metodo siblings() che seleziona tutti gli elementi consanguinei di un dato elemento. Possiamo implementare anche noi un metodo simile con relativa facilità. Vediamo come.

Ecco la nostra implementazione:

function siblings(node) {

		var sibls = [],
			children = node.parentNode.childNodes,
			i,
			len = children.length;
		
		for(i = 0; i < len; i += 1) {
		
			var current = children[i];
			
			if(current.nodeType == 1 && current !== node) {
			
				sibls.push(current);
			
			}
		
		}
	
	
		return sibls;
}

Questa funzione esegue un test di comparazione tra il nodo scelto come riferimento e gli altri suoi fratelli. Se il nodo corrente è diverso da quello scelto viene aggiunto all'array di nodi restituito dalla funzione.

Ecco un esempio pratico. Data la seguente struttura HTML:

<ul id="test">
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
	<li>E</li>
</ul>

possiamo selezionare i nodi fratelli del terzo nodo in questo modo:

var node = document.getElementById('test').getElementsByTagName('li')[2];
var sib = siblings(node);
	
for(var j = 0; j < sib.length; j += 1) {
	
  console.log(sib[j].firstChild.nodeValue);
	
}

E il risultato sarà:

A

B

D

E