navegar los nodos (DOM)

[idenmedia]

Dado algo como esto esto

<ul>
<li class="campos">* Nombre</li>
<li class="aca"><input id="f_nombre" type="text" class="requerido"/></li>
<li class="verificador mal">&nbsp;</li>
</ul>

Quiero cambiar el class del tag li, que tiene la clase "verificador mal", pero para ello tengo que dirigirme desde el tag input (que es el que ejecuta la función).
Como llego al nodo correcto.

Probe con this.parentNode.nextSilbing.className da indefinido
lo mismo this.parentNode.parentNode.lastChild

alguna idea?
y de paso si saben de algun link que indique como navegar los nodos en Jquery.

Gracias!

[AlvaroG]

nextSibling debería funcionar, por las dudas haz esto:

document.getElementById('f_nombre').parentNode.nex tSibling.style.border = '2px solid red';

Si funciona, verás el li con un borde rojo.

Por otro lado, "verificador mal" no es un nombre de clase, es el nombre de dos clases. Ese elemento pertenece a la clase "verificador", y a la clase "mal". por className no tendrás el valor que querés, quizás probando por getAttribute('class') sí obtengas lo que querés.


Saludos.

[zerokilled]

Probe con this.parentNode.nextSilbing.className da indefinido
lo mismo this.parentNode.parentNode.lastChild

en teoría se entendería que así debería funcionar pero técnicamente no. ¿razón? te estas olvidando de los nodos TextNode.

Código:

<ul>
<li class="campos">* Nombre</li>
<li class="aca"><input id="f_nombre" type="text" class="requerido"/></li>
<li class="verificador mal">&nbsp;</li>
</ul>

fíjate que cada elemento esta separado por una nueva linea (linefeed), los navegadores lo analizan como un nodo. para comprobarlo, itera el NodeList childNodes del elemento UL. te debe dar más o menos algo como [TextNode, HTMLLiElement, TextNode, HTMLLiElement, TextNode, HTMLLiElement, TextNode]. en base a esto se entiende que la solución es sencilla, en lugar de invocar una sola vez nextSibling se invocaría dos veces. en realidad esa es la solución, pero hay un problema. usando ese mismo esquema HTML, el user-agent de iexplorer no recrea los nodos TextNode cuando éste contiene caracteres no imprimibles. o sea, caracteres white-spaces: espacios y line feeds. por lo que invocar dos veces nextSibling estaría haciendo referencia, no al segundo HTMLLiElement, sino al tercero.

¿cómo se soluciona? evitando espacios entre cada etiquetas. lo que lleva a sobrentender que hay que escribir el código HTML en una sola linea. es una opción pero pudiera ser un tanto complicado para luego analizar la estructura del documento. la solución es que en lugar de escribir la etiqueta en una sola linea se escriben en dos de modo que se le pueda dar continuidad. por ejemplo, el código anterior quedaría de la siguiente forma, o bien se puede usar diferentes variantes. el punto es que no hay espacios entre cada etiqueta.

Código:

<!-- posibilidad #1 -->
<ul
><li class="campos">* Nombre</li
><li class="aca"><input id="f_nombre" type="text" class="requerido"/></li
><li class="verificador mal">&nbsp;</li
></ul>

<!-- posibilidad #2 -->
<ul><li class="campos">* Nombre</li
><li class="aca"><input id="f_nombre" type="text" class="requerido"/></li
><li class="verificador mal">&nbsp;</li></ul>

<!-- posibilidad #3 -->
<ul><li class="campos">* Nombre
</li><li class="aca"><input id="f_nombre" type="text" class="requerido"/>
</li><li class="verificador mal">&nbsp;</li></ul>

<!-- posibilidad #4 -->
<ul><li class="campos">* Nombre</li><li class="aca"><input id="f_nombre" type="text" class="requerido"/></li><li class="verificador mal">&nbsp;</li></ul>

de esta forma te funciona tanto en navegadores que consideran como TextNodes los espacios en blanco como los que no lo consideran.

@edit: al final pude encontrar el artículo donde se discute, https://developer.mozilla.org/en/whitespace_in_the_dom