ParentNode en array

[salbatore]

Hola foreros!

Estoy intentando hacer un array con todos los clases de cada padre del "this". Es decir:

Código HTML:

<div class="hola">
         <div class="adios">
                     <div class="yo_soy">
                     </div>
         </div>
</div> 

¿Como podria?, es decir, tener un array con las clases del padre de yo_soy

Código PHP:

  array_padres(0)='hola';
array_padres(1)='adios'; 
   

He intentado hacerlo con:

this.parentNode.className siendo this el elemento de clase "yo_soy", pero no se me ocurria como hacer el bucle para meterlos en un array.

¿Como lo hariais?

[zerokilled]

en el bucle, el mecanismo que funciona como iteracion seria controlado por elemento padre. por ejemplo:

Código:

var array = [];
for(var elem = this; elem; elem = this.parentNode){
// aqui va tu codigo que determina si el padre contiene una clase;
}

ahora bien, este bucle se extiende hasta el nodo mas alto de la jerarquia DOM, o sea hasta el objeto document. si quieres controlar hasta donde se extiende, necesitaras de alguna forma determinarlo. una alternativa es teniendo de antemano la referencia de uno de los elementos padre del elemento actual. luego, en el cuerpo del bucle compara si el elemento en iteracion es igual al elemento que tienes como referencia. si es cierto, rompes el bucle con break;.

[salbatore]

Hola zerokilled,

He intentado usar tu codigo, pero no se por que no me identifica ninguna clase y el bucle no para de repetirse.

Yo activo esta funcion cuando alguien hace focus sobre un input. Y deseaba que identificara cual es su objeto padre mas superior con una determinada clase para colorearlo.

Código PHP:

  var form_focus=function()
    {
            var array = [];
             for(var elem = this; elem; elem = this.parentNode)
          {
        alert('voy a mirar tu clase');
        if(elem.className=='form_fieldset')
            {
                alert('tienes la clase adecuada!');
                colorFade(elem.id,'background','ffffff','003366');
            return false;
                 }
           }
         } 
   

¿Que hago mal?

[zerokilled]

¿podrias poner un ejemplo del codigo html? adicional, ¿como estas invocando la funcion?

[kbmaster]

Creo que tus problemas podrian set los siguientes
1- no estas estableciendo una condicion de corte para tu padre, recuerda que el padre del div 'hola' es el body y luego vas a pasar a preguntar por el padre del body y asi sucesivamente, creo q esta es la causa de tu ciclo infinito...
2- la propagacion de eventos si no detienes la propagacion el evento que ejecutes sobre el div mas profundo se propagara hacia arriba de esta forma tu funcion se ejecutara 3 veces consecutivas; la primera para los divs yo_soy adios y hola, la siguienete para adios y hola y la ultima para yo soy.

te dejo un codigo que sifunciona y creo q hace exactamente lo que buscas...

var form_focus=function(evt)
{
evt.stopPropagation(); //aca detengo la propagacion del evento

var array = [];
elem=this;

//el ciclo solo va para los divs

while(elem && elem.nodeName=='DIV')
{
alert(elem.className);
array.push(elem.className);
elem=elem.parentNode;

}
}



con este codigo asigno al evento onclick de cada div la funcion form_focus

<script>
var elms=document.getElementsByTagName("div");
for (i in elms)
{
alert(elms[i].nodeName);
if(elms[i].nodeName=='DIV')elms[i].onclick=form_focus;
}
</script>

[salbatore]

hola kbmaster,

Muchas gracias por el codigo! ha cumplido su funcion, jeje.

Gracias de nuevo! :)