mmm devi considerare che se hai questo HTML:
codice:
<div id="MyID">
<p class="MyParagraph">
</p>
<input type="button" onclick="alert(this.previousSibling.className)" />
</div>
Al click sul bottone non è affatto detto che di faccia l'alert con "MyParagraph" anzi, sicuramente non te lo fa, questo perché tra i due ci sono degli spazi, tab, testo, che le specifiche DOM indicano come TextNode.
a tutti gli effetti la struttura che vedi è composta da
codice:
[ElementNode tagName="div" id="MyID"]
[TextNode value=" "][ElementNode tagName="p class="MyParagraph"]
[TextNode value=" "][/p]
[TextNode value=" "][ElementNode tagName="input type="button" onclick="alert(this.previousSibling.className)" /]
[/div]
Quindi per ottenere il paragraph dall'input devi fare input.previousSibling.previousSibling, comunque questo non è il metodo più sicuro, il modo migliore è:
codice:
//Ottiene l'elemento HTML precedente
function getPrevous(elem){
for(var c = elem.previousSibling; c != null; c = c.previousSibling){
if(c.nodeType == 1){ //nodeType == 1 >> ElementNode
return c;
}
}
return null;
}
//Ottiene l'Elemento HTML successivo
function getNext(elem){
for(var c = elem.nextSibling; c != null; c = c.nextSibling){
if(c.nodeType == 1){ //nodeType == 1 >> ElementNode
return c;
}
}
return null;
}
Con queste funzioni sei sicuro di ottenere o l'elemento inderessato o null.