[Jquery-Es] Primera consulta, seleccionar elemento

[Choan Gálvez]

Hola Claudio.

On 11/06/2008, at 18:44, Claudio A. Salazar Beltrán wrote:

> [...]
> Tengo una serie de h3 que son seguidos de un div con el contenido  
> relativo a
> dicha etiqueta, como el siguiente ejemplo :
>
> < h3 >título 1< / h3 >
> < div id ="uno" > contenido 1 < / div >
> < h3 >título 2< / h3 >
> < div id ="dos" > contenido 2< / div >
> < h3 >titulo 3< / h3 >
> < div id ="tres" > contenido 3 < / div >
>
> Quiero que al hacer click sobre cada h3, su correspondiente div  
> aparezca y
> desaparezca (toggle). Eso es fácil, si es que creo el código para  
> cada h3.
> Mi duda puntual es... ¿ Como lo hago para obtener el mismo resultado  
> sin
> crear el código independiente para cada h3 ?
> ¿ Como selecciono el div que está a continuación del h3 de forma  
> genérica,
> sin tener que hacerlo uno por uno ?

Por partes.

Primero, seleccionas los `h3`

     $('h3');

Y asignas a cada uno de ellos un manejador.

     $('h3')
       .bind(click, click_handler);

En tu manejador, `this` apunta al elemento al que se ha asignado.

     function click_handler(e) {
       $(this).etc();
     }

El método `next` selecciona una colección compuesta por cada uno de  
los elementos que siguen a cada uno de los elementos de la colección  
actual. Esto es:

     $('h3'); // [ h3, h3, h3 ]
     $('h3').next(); // [ div, div, div ]

Y por tanto en tu manejador

     $(this); // [ h3 ]
     $(this).next(); // [ div ]

Para mostrar/ocultar (de una manera básica) un elemento, puedes usar  
el método `toggle`. Así, pues, el manejador quedará en:

     function click_handler(e) {
       $(this)
         .next()
           .toggle();
     }

Ahora solo nos queda "empaquetarlo":

     jQuery(function($) {

       $('h3')
         .bind(click, click_handler);

         function click_handler(e) {
           $(this)
             .next()
               .toggle();
         }
     });

Un saludo.
-- 
Choan Gálvez, que escribe sobre javascript en Scriptia
<http://blog.scriptia.net/>