GUARDAR ID de DIVS en ARRAY

pelusete · #1 (**permalink**) 27/06/2008, 14:26

Hola amigos, soy nuevo en este foro y este es mi primera duda:

Tengo una web en la cual quiero controlar el numero de divs de poseen una determinada clase, quiero obtener su identificacion (getelementbyid()) y guardar dicha identificacion en un array...para poder luego jugar con ese array y mostrar/ocultar los divs de acuerdo a sus identificaciones.

1. Lo primero que hice es una "prueba" en la ke io mismo sabia cuales eran esos ids de los div y me funciona perfectamente
2. quisiera hacer lo mismo, pero mediante una funcion, la cual me guarde los id's de esos divs, para luego trabajar con ellos (quisiera que la funcion me los hiciera solita, sin que io mismo intervenga...) ¿Como lo podria hacer?

A continuacion les adjunto el code:

Cita:

<html>
<head>

<script type="text/javascript">

function show(id)
{
var A = ['home', 'noti', 'rank']; //divs que se mostraran al lado derecho

for(i=0; i<A.length; i++)
{
if( id == A[i] ) { document.getElementById(A[i]).style.zIndex=1; } //muestra objetivo
else { document.getElementById(A[i]).style.zIndex=0; } //oculta demas
}
}

</script>

<style>

body { background: #222; text-align:center; }
#contenedor
{
text-align: left;
width: 500px;
background-color: #fff;
margin: auto;
padding: 10px;
}
#cab
{
height: 100px;
width: 100%;
background-color: #789;
}
#izq2 { width: 20%; background: green; float: left; }
#izq { width: 20%; background: #069; float: left; }
#der { width: 80%; background: #456; float: left; }

.div_der { position: absolute; margin: 0; padding: 10px; z-index:0; }
#noti { background: #ccc; color: black; }
#home { background: #eee; color: 654; }
#rank { background: #ddd; color: 432; }

#pie { width: 100%; height: 20px; background: #333; color: white; clear: both; }

</style>
</head>

<body>

<div id="contenedor">
<div id="cab">Cab</div>
<div id="izq">
<a href="#" onclick="show('home');">Home 2</a><br>
<a href="#" onclick="show('noti');">Noti 2</a><br>
<a href="#" onclick="show('rank');">Rank 2</a><br>
</div>
<div id="der">
<div id=home class=div_der>home lalalala</div>
<div id=noti class=div_der>noticias lalalala</div>
<div id=rank class=div_der>ranking lalalala</div>
</div>
<div id="pie">pie</div>
</div>

</body>
</html>

:: ¿como hago una funcion que detecte las identificaciones de los id, las guarde en un array y posteriormente jugar con el array de identificaciones para mostrar/ocultar los divs en cuestion?

Cualquier sugerencia es bien recibida ^^

derkenuke · #2 (**permalink**) 27/06/2008, 20:44

Hola pelusete, bienvenido al foro:

Creo que lo que estás buscando es la función no nativa document.getElementsByClassName(), implementada en algunos frameworks como Prototype (Ahora la llaman doble dólar $$(), y hace más cosas). Básicamente consiste en recorrer todos los elementos del documento buscando aquellos que tienen el className que a ti te interese.

Creo que en tu caso podría servir también coger todos los DIVs dentro del DIV con id der:

Código PHP:

  var misDivs = document.getElementById("der").getElementsByTagName("DIV");

Así tendrías los 3 DIVs en un array, no tendrías que almacenar sus id's porque ya los tendrías directamente y podrías hacer:

Código PHP:

  misDivs[1].style.zIndex = 1;

Para mostrar el de id noti.

Espero haberte ayudado.
Saludos

pelusete · #3 (**permalink**) 27/06/2008, 21:30

Garcias derkenuke por tu respuesta
esta genial lo ke me dices...pero sigo teniendo una duda...

Este codigo efecvtivamente me guarda en un array todos los divs ke esten dentro de DER

Cita:

var misDivs = document.getElementById("der").getElementsByTagNam e("DIV");

Y asi puedo acceder a una propierdad de un div en especial con:

Cita:

misDivs[1].style.zIndex = 1;

Aki va mi duda...

¿como puedo comparar la ID ingresada por parametro a la guardada en el array misDivs?

tengo aki un code...pero no me funciona

Cita:

¿como podria lograrlo?

derkenuke · #4 (**permalink**) 27/06/2008, 21:35

Hola de nuevo:

Podría ser:

Código PHP:

  if( id === misDivs[i].id ) { }

Se puede acceder directamente al atributo, o se puede utilizar getAttribute("id") o getAttributeNode("id").nodeValue, las tres fórmulas te devolverán lo mismo.

Saludos!

pelusete · #5 (**permalink**) 27/06/2008, 22:37

derkenuke muchisimas gracias!!! ^^
pude lograr lo que queria gracias a ti!

Muchisimas gracias!! ^^

Aki te dejo el code

Cita:

<html>
<head>

<script type="text/javascript">

function show(id)
{
var misDivs = document.getElementById("der").getElementsByTagNam e("DIV");

for(i=0; i < misDivs.length; i++)
{
if( id == misDivs[i].id ) { misDivs[i].style.zIndex = 1; } //muestra objetivo
else {misDivs[i].style.zIndex = 0; } //oculta demas
}
}

</script>

<style>

body { background: #222; text-align:center; }
#contenedor
{
text-align: left;
width: 500px;
background-color: #fff;
margin: auto;
padding: 10px;
}
#cab
{
height: 100px;
width: 100%;
background-color: #789;
}
#izq2 { width: 20%; background: green; float: left; }
#izq { width: 20%; background: #069; float: left; }
#der { width: 80%; background: #456; float: left; }

.div_der { position: absolute; margin: 0; padding: 10px; z-index:0; }
#noti { background: #ccc; color: black; }
#home { background: #eee; color: 654; }
#rank { background: #ddd; color: 432; }

#pie { width: 100%; height: 20px; background: #333; color: white; clear: both; }

</style>
</head>

<body>

<div id="contenedor">
<div id="cab">Cab</div>
<div id="izq">
<a href="#" onclick="show('home');">Home 2</a><br>
<a href="#" onclick="show('noti');">Noti 2</a><br>
<a href="#" onclick="show('rank');">Rank 2</a><br>
</div>
<div id="der">
<div id=home class=div_der>home lalalala</div>
<div id=noti class=div_der>noticias lalalala</div>
<div id=rank class=div_der>ranking lalalala</div>
</div>
<div id="pie">pie</div>
</div>

</body>
</html>

Muchas gracias!!! :D

derkenuke · #6 (**permalink**) 28/06/2008, 08:47

Muchas de nadas