[JS] nextSibling con IE7... funziona?

[cleverboy]

salve a tutti

le domande in realtà sono 2...

1) TEORIA DEL NEXTSIBLING. Per quello che ne so io object.nextSibling dovrebbe restituire l'oggetto successivo che si trova sullo stesso livello (ossia non è un figlio) di object.
Secondo il mio browser invece pare di no

La mia pagina (per quello che ci interessa adesso) è fatta così:

-- HTML --
testo 1
<div class="dettagli">
   BLA BLA BLA
   BLA BLA BLA
</div>



-- JAVASCRIPT --

function toggle(object) {
	var detailBox = object.nextSibling.nextSibling;
	if(detailBox.style.display != 'none'){
		object.style.background ="url('img/segnoPiu.gif') no-repeat 0 0";
		detailBox.style.display = 'none';
	}
	else {
		object.style.background ="url('img/segnoMeno.gif') no-repeat 0 0";
		detailBox.style.display = 'block';
	}
}

function initEffect() {
	var links = document.getElementsByTagName('a');
	var i;
	
	for (i=0; i<links.length; i++) {
		if (links[i].getAttribute('class') == 'show') {
			// associo l'evento al click del mouse
			links[i].onclick = function() {toggle(this); return false;}
			// chiudo il contenuto per coloro che utilizzano il JS
			links[i].nextSibling.nextSibling.style.display='none';
			links[i].style.background ="url('img/segnoPiu.gif') no-repeat 0 0";

		}
		
	}
}


window.onload = function() {
	initEffect();
}

Perché, una volta localizzato il link con getElementByTagName('a') devo fare una cosa tipo nomeLink.nextSibling.nextSibling (due volte) per beccare il DIV?
Eppure il DIV è il primo elemento che si trova sullo stesso livello del collegamento ipertestuale... NO?

2) PRATICA. Come faccio a far digerire il nextSibling a IE7?

grazie mille!

[Xinod]

c'e' intanto una piccola sfumatura che correggerei
if (links[i].getAttribute('class') == 'show') {...}

qui IE non rilevera' il class, ma il className,
allora per mantenere il controllo uniforme per tutti i browser puoi direttamente fare
if (links[i].className == 'show') {...}

riguardo il doppio nextSibling, la risposta e' semplice per quanto possa apparire folle:
nel markup vai a capo e cosi' facendo analizzando l' alberatura via DOM risulta un nodo vuoto (appunto, il primo nextSibling)
se <div> fosse sulla stessa riga di codice di <a></a> non avresti il nodo in piu'

per evitare si usa una funzione di appoggio che valuta il nodeType del nodo e prosegue fino a che non trova il nodeType di un tag (1) prima di ritornare il riferimento ad esso alla funzione che lo utilizzera'

function getNextSibling(node){
	while(node=node.nextSibling){
		if(node.nodeType=='1') return node
	}
}

function toggle(object) {
	var detailBox = getNextSibling(object);
...
}
...
			// chiudo il contenuto per coloro che utilizzano il JS
			getNextSibling(links[i]).style.display='none';
...

questo ti permette di riferirti sempre al vero nextSibling nonostante rimandi a capo, spazi vuoti nel codice e perfino commenti

testo 1





<div class="dettagli">
   BLA BLA BLA
   BLA BLA BLA
</div>

ciao

[cleverboy]

Grazie mille... mi hai illuminato!