Problema con funcion each() de jQuery

[miwelillo]

Saludos, estoy teniendo problemas para implementar (y entender) esta funcion para una cosilla que quiero hacer.
Tengo una serie de enlaces que se generan dinamicamente a partir de unos datos contenidos en una base de datos del tipo:
enlace0, enlace1, etc. y los identifico mediante la clase .textlink0, .textlink1, etc.

Lo que quiero es poder distinguir entre cada uno de los enlaces cuando se hace click y mostrar u ocultar informacion cuando se haga click en cada enlace. Aqui viene el codigo que he pensado pero que por lo que veo no funciona aunque segun parece, o hago mal algo, o no entiendo del todo bien la funcion .each()

Código PHP:

  $(document).ready(function(){ 
$('#vids').each(function(i){ 
        $('.textlink' + i).css('cursor', 'pointer'); 
        // Para cada enlace con id=i cuando se haga click, lo muestro o lo oculto 
        $('.textlink' + i).click(function(){ 
            $('.textooculto' + i).hide(); 
        }); 
    }); 
});  
   

Nota: la clase .textlink y .textooculto estan contenidas dentro de la capa #vids.

Saludos!

[emiliodeg]

bueno hay q hacer una pequeña correccion para q soporte el formato textolink0, textolink1, ...

Código javascript:

$(document).ready(function(){
var i=0;
$('#vids').each(function(){
        $('.textlink' + i).css('cursor', 'pointer');
        // Para cada enlace con id=i cuando se haga click, lo muestro o lo oculto
        $('.textlink' + i).click(function(){
            $('.textooculto' + i).hide();
        });
i++;
    });
});
 

[mayid]

A ver si esto aclara:

botones = $('#vids a'); // todos los botones

var i=0;
botones.each(function(boton){

boton.click(function(){
$('this').toggle();
return false;
});
i++;
}); // fin de each


Usar clases con nombre diferente puede confundir:
.textlink0, .textlink1

En el caso de querer usar identificadores diferentes, usa "id" en vez de "class".

De cualquier manera, lo que los hace unicos es el atributo "href" que les definas.

nota: lo que le falta a este ejemplo es el tema de ocultar la informacion anterior, cada vez que pulses un nuevo link.

Otra cosa: si en realidad no vas a usar enlaces, el evento click debería devolver:
return false;

[miwelillo]

Hola, gracias por vuestras respuestas. He conseguido solucionarlo pero no acabo de entender el codigo que has puesto. La primera duda que tengo es con la linea:

botones = $('#vids a');

ya que no entiendo como haces para distinguir entre cada enlace sin declarar ningun tipo de selector especifico, ¿lo hace jquery de manera automatica? por otro lado aqui esta el codigo con el que he conseguido lo que queria aunque no se por que no funciona sin el "return false" (otra de mis dudas):

Código PHP:

      botones = $('#vids a'); // todos los botones
    var i=0;
    botones.each(function(i){
        i++;
        //botones.click(function(){
        $('.texto' +i).click(function(){
            $('.textooculto' +i).toggle();
            return false;
        });
    }); // fin de each  
   

Código PHP:

  <div id="vids">
        <a href="#" class="texto1">Click</a>
        <br />
        <div class="textooculto1">Primer Texto Oculto</div>
    </div>
    
    <p>&nbsp;</p>
    
    <div id="vids">
        <a href="#" class="texto2">Click</a>
        <br />
        <div class="textooculto2">Segundo Texto Oculto</div>
    </div>  
   

He tenido que hacer una chapucilla ya que mis IDs empiezan por 1 por lo que primero he inicializado la variable a 0 y luego la he incrementado mediante i++

[mayid]

Primero definis un conjunto (en este caso, de botones):

botones = $('#vids a');

Asi estas diciendo que queres reunir a todos los enlaces ("a") que estan contenidos en el div llamado "vids".

Y una vez que tenes el conjunto, lo recorrer, diciendo "each" ("a cada uno" literalmente).

No necesitas tener un nombre unico para cada link, sino que los seleccionas por tipo de elemento. Y aqui es donde creo que no estas bien afianzado. En la identificacion.

Vuelvo a decirte que "class" (es decir, "clase") se utiliza mas que nada para grupos. Y que para hacer identificadores unicos ("textooculto1", "textooculto2", etc) lo mas claro es usar "id".

Te acrodas que en javascript podias seleccionar por id y por classname? En el primer caso, obtendrias un solo elemento. En el segundo, podrías tener varios.

Siguiendo: una vez que tenes el conjunto de botones, los recorres:

botones.each( function(boton) { alert(boton); } )

Aqui vas a tener un alert por cada elemento. Probalo. Estas recorriendo "cada boton" del conjunto "botones".

Finalmente, con "return false" estas diciendo que das prioridad al evento "click" por sobre el enlace definido en "href". Si no pusieras false, se ejecutaria mas bien un enlace que el "mostrar / ocultar".

[mayid]

OJO! Te vuelvo a decir lo mismo: el atributo id ha de ser UNICO en toda la pagina. Y aqui estas repitiendo "vids" en dos divs diferentes. Cuando tendrías que estar usando "class" para poder repetir un nombre.

<div id="vids">
<a href="#" class="texto1">Click</a>
<br />
<div class="textooculto1">Primer Texto Oculto</div>
</div>

<p>&nbsp;</p>

<div id="vids">
<a href="#" class="texto2">Click</a>
<br />
<div class="textooculto2">Segundo Texto Oculto</div>
</div>

Otra cosa en donde te vendría bien ahondar es en la jerarquia. Si tu codigo es realmente el que publicastes, no necesitas identificadores unicos para los divs ocultos. Sencillamente pensas en terminos de "parent", "children" y "sibling" (padre, hijo, hermano), y usas un un codigo jquery para seleccionar el div "hermano" de tu link. Esto es "div" hermano de "a", o sea "contenidos en un mismo " vids ".
nota: el padre seria ese "vids". Y los hijos del padre, logicamente, son "a" y "div".

Pero no te marees todavia. Segui usando identificadores, y luego si los selectores de jerarquia, cuando tengas mas cancha.

[mayid]

Un enlace que es de gran utilidad para estudiar selectores y jerarquia es el manual de jquery:
http://docs.jquery.com/Selectors

Ahi se entiende que para la siguiente linea:
botones = $('#vids a');
lo que estamos diciendo es "cualquier vinculo ('a') dentro de la etiqueta con id ('#') 'vids' ".

Es decir, cualquier vinculo dentro de "vids".

Eso es una jerarquia: uno dentro de otro: padre-hijo.

Tambien estan las jerarquias de hermanos, como te decia.

[miwelillo]

Vaya, excelentemente documentado!! Creo que ahora me ha quedado mucho mas claro. La verdad es que como dices tendria que cambiar el id por class (crearme una clase ".vids" en lugar de usarlo como identificador) de todos modos aun tengo que depurar un poco el codigo una vez acabe de entender del todo como funciona jQuery.

Todavia me tengo que estudiar la jerarquia del DOM y todos los tipos de selectores que existen en jQuery pero creo que poco a poco lo conseguire!

De nuevo te doy las gracias y a ver si me entra de una vez!! (que yo y el JS no nos llevamos muy bien :P)

[Geoide]

Hola, tengo una duda relacionada con esta. Yo tengo más o menos la misma situación que nuestro compañero, realizo la misma función para recorrer los enlaces de mi div, el problema es que no soy capaz de que los enlaces hagan nada (ni siquiera veo el alert). Creo que el problema pude venir de que mi div lo creo devolviendo datos mediante el load (Ajax) de jquery, el cual realiza una llamada a un php que hace unas consultas a mi base de datos y devuelve lo que quiero. La información la devuelve bien en mi div, incluso con el firedeug veo que se ha montado el DOM correctamente y ahi están mis div creados y "a" correctamente, pero cuando accedo a ellos no funcionan. He probado ha acceder de muchas formas y nada. ¿Hay algún problema entre las sentencias lquery y datos devueltos de esta forma?. Me como la cabeza y nada. No pongo el código por si es un problema facilón de filosofía de trabajo (que es a lo que me suena), pero si hace falta lo pongo. Gracias.

[mayid]

El problema con load es que carga la data pero no deja procesarla inmediatamente. Necesitas una funcion callback. Y creo que load la trae, pero la cosa no queda ahi. Necesitas una funcion que se ejecute, en lo posible, asincronicamente.

El tema es que tu script se lee linealmente. Load empieza a cargar la data pero ya da paso al proximo renglon, que pretende modificar lo que aun no esta incorporado en el DOM. Por esto es importante usar las llamadas a tus modificadores "div" y "a" recien cuando termine de ejecutarse load o alguna otra funcion de ajax.

Aca esta todo:
http://www.cristalab.com/tutoriales/...-jquery-c226l/

Por otro lado, una funcion each, hoy por hoy, me resulta asi de simple:

jQuery.each(listado, function(){
alert($(this));
});