jQuery: Evento después de terminar each()

coke_135 · #1 (**permalink**) 28/08/2010, 15:01

Hola a todos,

estoy haciendo mi primer trabajo con jQuery. Es una web con 4 secciones y un menú superior con los 6 apartados. Cuando haces click en "1" se despliega la sección correspondiente y así con las 6 opciones.

Ahora bien, tengo un problema. Si has visitado la primera vez la sección "2" y haces click en el menú en "4", quiero que "2" se pliegue automáticamente y se despliegue "4".

Para no complicarme mucho, he pensado que lo mejor era hacer un each() de todos los elementos y plegarlos antes de desplegar el siguiente. Es decir, cuando haces click en cualquier opción del menú, hago un each() de todas las secciones y las pliego, desde la "1" a la "6". Y luego despliego la del click (la"4" siguiendo el ejemplo de antes).

El problema, si uso esta opción, es que el pliegue se ejcuta más lento que el despliegue, y siempre acaban cerrándose todas las secciones:

Código HTML:

temp = this.id;
if($(this).hasClass('clicked')){
$("#menu > img").each(function (){
	pliega("#"+this.id);
});
despliega("#"+temp);

He probado también pasando un contador a la función y haciendo:

Código HTML:

//Cuando estamos en el último elemento...
if (i == 6){
     despliega("#"+temp);
}

pero también se adelanta y no funciona correctamente.

Me gustaría saber si es posible ejecutar un evento cuando termine el each(), en orden y sin adelantarse a la finalización del último elemento.

¿Alguna idea? ¡Gracias!

tredio · #2 (**permalink**) 28/08/2010, 15:11

podiras hacer algo asi, como no se que tiempo toma plegar o desplegar le cambias algunos valores que pongo.

Código Javascript:

Ver originaltemp = this.id;
if($(this).hasClass('clicked')){
   var tam = $("#menu > img").length;
   $("#menu > img").each(function (i){
    pliega("#"+this.id);
        if(i==(tam-1))
           setTimeout(function(){despliega("#"+temp);},tiempo_que_toma_plegar);
   });

coke_135 · #3 (**permalink**) 28/08/2010, 15:18

Hola tredio,

gracias por tu respuesta.

En caso de no encontrar algo mejor tendré que hacerlo así, pero creo que tiene que haber una forma más correcta de hacerlo. El tiempo que le lleva plegarse puede depender del navegador o el ordenador en el que se ejecute y tampoco quiero poner un valor demasiado alto que me asegure la espera pero que ralentice demasiado la navegación y se resienta la usabilidad con usuarios esperando 2 ó 3 segundos. Si me quedo corto el resultado sería también malo.

A ver si alguien tiene una forma mejor. Gracias igualmente ;).

tredio · #4 (**permalink**) 28/08/2010, 15:50

puedes hacer algo muy facil pasar una funcion como parametro de pliega(); y ejecutarla al final de la misma si existe, lo que te puse fue por que ya lo estabas haciendo asi, y no tengo muchos datos de otra forma de hacerlo con el poco codigo que pusiste.

Código Javascript:

Ver originaltemp = this.id;
if($(this).hasClass('clicked')){
   var tam = $("#menu > img").length;
   $("#menu > img").each(function (i){
    pliega("#"+this.id);
        if(i==(tam-1))
           pliega("#"+this.id,function(){
              despliega("#"+temp);
           });
   });

prueba algo asi, no estoy muy seguro si te va a agarrar la variable temp, tambien tedras que hacerle modificaciones a pliega()

coke_135 · #5 (**permalink**) 30/08/2010, 02:35

Gracias tredio. Lo he hecho así modificando alguna cosa más y va de lujo ;).

¡Un saludo!

Dany_s · #6 (**permalink**) 30/08/2010, 05:28

Código HTML:

Ver original<head>
<title>Prueba</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    
$(function (){
    //Click en h3 que no tengan clase 'active'
    $('h3:not(.active)').click( function(){
        //Busco el h3 con clase 'active', elimino la clase 'active' y lo oculto el div que le sigue
        $(this).siblings('.active').removeClass('active').next().slideToggle();
        //Argego clase 'active' y muestro el div que le sigue
        $(this).addClass('active').next().slideToggle();
    });
})
</script>
<style>
    div{display:none}
</style>
</head>
<body>
 
<h3>1</h3>
<div>uno</div>
<h3>2</h3>
<div>dos</div>
<h3>3</h3>
<div>tres</div>
<h3>4</h3>
<div>cuatro</div>
<h3>5</h3>
<div>cinco</div>
<h3>6</h3>
<div>seis</div>
 
</body>
</html>