[Jquery-Es] Primera consulta, seleccionar elemento

Claudio A. Salazar Beltrán claudiosalazarb en gmail.com
Mie Jun 11 12:29:17 PDT 2008


No esperaba ayuda tan pronta, muchas gracias !!

.next() era precisamente lo que necesitaba!

Finalmente lo hice asi :

$("h3").toggle(
      function () { $(this).next().slideDown("slow");},
      function () { $(this).next().slideUp("slow");}
    );

Funcionó perfecto !
Saludos.

El día 11 de junio de 2008 13:18, Choan Gálvez <choan.galvez en gmail.com>
escribió:

> 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/>




-- 
Claudio A. Salazar Beltrán
Desarrollo de Software & Web
+56-65-712538
+56-09-82056187
Skype : claudio_salazar_b
Puerto Montt
Chile
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: <http://lists.scriptia.net/pipermail/jquery-es-scriptia.net/attachments/20080611/67cde236/attachment.htm>


Más información sobre la lista de distribución Jquery-Es