Problema al querer hacer una acción sobre varios elementos

[DandyCC]

Muy buenas. Intentaré exponer el problema lo más preciso posible. Tengo una tabla en la que si el usuario pulsa sobre un enlace, se despliega cuerta información haciendo visible un tr inicialmente oculto. Esta es la estructura general:

Código HTML:

<table>
    <tbody>
        <tr></tr>
        <tr class="ocultable oculto"></tr>
        <tr></tr>
        <tr class="ocultable oculto"></tr>
        <tr></tr>
        <tr class="ocultable oculto"></tr>
    </tbody>
</table>
 

La clase "ocultable" no tiene estilos asociados, la uso sólo para detectar el tr luego con jquery. La clase "oculto" simplemente tiene como estilo "display: none".

Bien, en los tr que no están ocultos se muestra cierta información y cuando el usuario pulsa sobre un enlace contenido en ese tr quiero que se haga visible el tr oculto siguiente. Y si ya estuviera visible, que se oculte. Esto es fácil y no me da problemas.

Código Javascript:

$('.nombre_alumno').click(function() {
    var ref = $(this).parents("tr").next();
    if (ref.hasClass("oculto")) {
        ref.removeClass("oculto");
    }
    else {
        ref.addClass("oculto");
    }
});
 

Además, tengo dos enlaces fuera de la tabla para mostrar todos los tr ocultos y para ocultarlos. Y aquí es donde viene el problema. Este es el código que uso para esto:

Código Javascript:

$('.desplegar').click(function() {
    // Selecciono todos los tr
    var ref = $(".central_section").find("#mostrar_trabajo_wrapper").find("tr");
    // Si tienen la clase oculto, la quito
    if (ref.hasClass("oculto")) {
        ref.removeClass("oculto");
    }
});
 
$('.recoger').click(function() {
    // Selecciono todos los tr con la clase ocultable
    var ref = $(".central_section").find("#mostrar_trabajo_wrapper").find(".ocultable");
    // Si no tienen la clase oculto, la añado
    if (!ref.hasClass("oculto")) {
        ref.addClass("oculto");
    }
});
 

La función de desplegar funciona perfectamente, pero la de recoger sólo funciona si ninguno los tr con la clase "ocultable" tienen la clase "oculto", es decir, que si hay desplegado al menos uno de los tr, no funciona.

Si me pudierais decir donde está el fallo os lo agradecería.

Saludos.

[Alexis88]

Creo que debes buscar los elementos a afectar directamente por el nombre de su clase y no estar recorriendo tantos elementos previos.

Inténtalo así:

Código Javascript:

var ref = $(".ocultable"); //Aquí tomo solamente a los TR con la clase "ocultable"
 
$('.desplegar').click(function() {
    if (ref.hasClass("oculto")) {
        ref.removeClass("oculto");
    }
});
 
$('.recoger').click(function() {
    if (!ref.hasClass("oculto")) {
        ref.addClass("oculto");
    }
});
 

Así se vería: http://jsbin.com/cedo/1

Saludos

[DandyCC]

Gracias por tu respuesta. Siento la tardanza en responder, pero he estado fuera esta semana. Ví el ejemplo funcionando cuando respondiste pero no tenía el ordenador donde guardo el código de la web en desarrollo para probarlo.
Lo he probado ahora y sigue pasando lo mismo :(

Igualmente gracias por tu respuesta.

[Alexis88]

Muéstranos el código actualizado para ver en dónde estás fallando y así poder ayudarte.

Edito: Acabo de darme cuenta que el JSBin que te pasé hace ya varios días, ha caducado, de modo que te paso este JSFiddle actualizado: http://jsfiddle.net/mk2eU/

Por si a caso, también te dejo el código acá:

Código Javascript:

var r = $(".ocultable");
 
$('.nombre_alumno').click(function() {
    var ref = $(this).parents("tr").next();
    if (ref.hasClass("oculto"))
        ref.removeClass("oculto");
    else
        ref.addClass("oculto");
});
 
$('.desplegar').click(function() {
    r.removeClass("oculto");
});
 
$('.recoger').click(function() {
    r.addClass("oculto");
});
 

[DandyCC]

He creado una cuenta en fiddle, que no tenía. A ver si lo he hecho bien y puedes verlo.

http://jsfiddle.net/DandyCC/DthVy/

Si pinchas sobre un "nombre_alumno" se despliega la información. Si con uno desplegado pinchas sobre recojer, no se recoge.

Gracias de nuevo por tu tiempo!!

[Alexis88]

¿Y por qué no lo haces como te lo indiqué si ves que de ese modo sí funciona?

Fíjate en el JSFiddle que te dejé.

[DandyCC]

Uy! Disculpa, copié ahí mi código original, no el modificado. Ya está

http://jsfiddle.net/DandyCC/z579G/

[Alexis88]

Tuve que hacerle varias correcciones a tu código para que funciones, entre ellas, [U]crear la clase oculto[U] (¿cómo pretendías ocultar las filas? ), además, quité la propiedad display: none que desacertadamente le asignaste a cada Div que se encuentra dentro de cada fila oculta. Saqué un par de Divs "wrapper" porque era innecesario tener un Div dentro de otro si ni siquiera estabas realizando algo con él.

Aquí tienes el código actualizado: http://jsfiddle.net/sRJ44/

Y por favor, la próxima vez diseña con más cuidado y evita usar tablas, las cuales solamente deben ser utilizadas para listar información, no para alinear elementos, para eso están los estilos.

Saludos

[DandyCC]

Hola y gracias por contestar de nuevo. Siento la tardanza, los viajes me están matando!!

La clase "oculto" está declarada en la web pero se me olvidó añadirla ahí. Lo siento.

Con respecto a la propiedad display: none que se encuentra dentro de cada fila oculta, es necesaria para la animación slideDown y slideUp. Estas animaciones no funcionan con las etiquetas tr, no sé exactamente por qué, así que para conseguir ese efecto tuve que ocultar los tr y el div de dentro. Así, cuando se tiene que mostrar un tr oculto primero elimino la clase "oculto" y luego aplico la animación al div de dentro. Y cuando se tiene que ocultar un tr, primero aplico la animación y luego oculto el tr con esta instrucción:

Código Javascript:

ref.find(".alumno_respuesta").slideUp("fast", function () {
     ref.addClass("oculto");
});
 

De todas formas me he fijado que en la solución que me has puesto funciona perfectamente "Desplegar todo" y "Recoger todo", pero no se oculta nada cuando hago click en "Nombre del alumno".

Si no soy capaz de encontrar la solución a esto eliminaré las opciones de "Desplegar todo" y "Recoger todo", aunque me da mucha rabia saber que algo se puede hacer pero no ser capaz de hacerlo!

[Alexis88]

Disculpa, se me olvidó añadir y quitar la clase oculto. Ya lo actualicé: http://jsfiddle.net/wkqQY/

Y con respecto a lo del slide, si me hubieras hecho caso y hubieras dejado de maquetar con tablas, no tendrías problemas. Para muestra, un botón:

DEMO
CÓDIGO FUENTE

Saludos

[DandyCC]

Tienes razón, debería haberlo rehecho. Voy a intentarlo sin la tabla a ver si me quito este problema de una vez de encima.

Muchas gracias de nuevo!!