Acceder a un div desde Jquery

[mmdeleo]

Espero me puedan ayudar con un problema.

Tengo una lista de articulos. Los cuales al darle click me tiene que aparecer una modal window que me tiene que mostrar, el nombre del articulo, su foto y una descripción.

El CSS es como se muestra en el siguiente codigo.

Código HTML:

<div id="contenedor">
    <a href="#"><img class="wmodal" src="imagenes/articulo1.jpg"></a>
    <p id="titulo" >Nombre del articulo 1</p>
    <div id="Descripcion" style="Display: none;"> 
          Descripcion del articulo 1. 
    </div>
</div>

<div id="contenedor">
    <a href="#"><img class="wmodal" src="imagenes/articulo2.jpg"></a>
    <p id="titulo" >Nombre del articulo 2</p>
    <div id="Descripcion" style="Display: none;"> 
          Descripcion del articulo 2. 
    </div>
</div> 

Elegi poner el mismo nombre para todos los divs para asi poder crear solo una funcion en jquery que funcione para todos, esto es por que tengo bastantes articulos y no quiero repetir tanto codigo.

No consigo, imprimir en la modal window el texto del #titulo y #Descripcion de cada imagen que doy click.

Es decir, si doy click en articulo2.jpg me manda el titulo y descripcion de el articulo1.

La funcion que tengo en Jquery es la siguiente.

Código PHP:

  jQuery(function ($) { 
    $('#contenedor .wmodal').click(function (e) { 
     $.modal("<div><h1>" + $("#titulo").html() + "</h1>" + $(this) + $("#Descripcion").html() + "</div>"); 
     return false; 
    }); 
});  
   

He llamado esos divs de diferentes formas pero no consigo el resultado deseado, he intentado lo siguiente.

Código PHP:

  $.modal($(this).next("#Descripcion").html());  
   

Y todas las formas que intento la salida es Null ó [object Object] pero no obtengo el texto de cada div seleccionado.

Espero me puedan ayudar

[Naahuel]

1.-

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

http://www.w3schools.com/tags/att_standard_id.asp

Básicamente, el atributo ID es único en el documento.

Es decir, si doy click en articulo2.jpg me manda el titulo y descripcion de el articulo1.

Eso es esperable y lógico.

Con esto dicho, vamos a sacar los id's y usar clases:

Código HTML:

<div class="contenedor">
    <a href="#"><img class="wmodal" src="imagenes/articulo1.jpg"></a>
    <p class="titulo" >Nombre del articulo 1</p>
    <div class="descripcion" style="display: none;"> 
          Descripcion del articulo 1. 
    </div>
</div>
 
<div class="contenedor">
    <a href="#"><img class="wmodal" src="imagenes/articulo2.jpg"></a>
    <p class="titulo" >Nombre del articulo 2</p>
    <div class="descripcion" style="display: none;"> 
          Descripcion del articulo 2. 
    </div>
</div>
 

2.- Tu script busca el mismo elemento todo el tiempo por estar usando ID's. Es lógico que encuentre sólo el primero.
Cambiamos los Id's por clases y cambiamos los selectores y las variables para optimizar un poco el script:

Código Javascript:

jQuery(function ($) { 
    $('.contenedor a').click(function (e) {
    //guardamos el elemento <a> al que se le hizo click
    var $elem = $(this);
    //el contenedor general es padre del <a> al que se hizo click
    var $cont = $elem.parent();
    
    //obtenemos los datos de cada elemento dentro del contenedor actual
    var titulo       = $cont.find('.titulo').html();
    var descripcion  = $cont.find('.descripcion').html();
    
    //abrimos el cuadro modal
    $.modal("<div><h1>" + titulo + "</h1>" + descripcion + "</div>"); 
    
    //evitamos accion por defecto del <a>
    e.preventDefault()
    }); 
});
 

Estudiá los comentarios y fijate bien cómo funciona.

[mmdeleo]

Amigo, muchas gracias.

Me ha servido de mucha ayuda tu respuesta, solo que ahora me falta enviar la imagen, no se si es problema del script de SimpleModal, que a la hora de mandar la imagen con la clase y con el codigo css que le pongo a la ventana modal, no me sale la imagen o me sale que es un objeto, asi es como tengo eso parte ahora. Cabe mencionar que si mando sola la imagen si me aparece. Gracias por sus respuestas

Código PHP:

  var $pic = $container.find(".wmodal"); 
 
$.modal("<div><h1>" + $title + "</h1>" + $pic + $descrip + "</div>");  
   

[Naahuel]

Y claro, $pic es un objeto jQuery. Necesitás obtener de ahí lo que quieras. Como ser el src de la imagen.

Probá algo así:

Código Javascript:

$.modal("<div><h1>" + $title + "</h1>" + "<img src='" + $pic.attr('src') + "' />" + $descrip + "</div>");
 

[mmdeleo]

Muchas gracias amigo, Me has ayudado muchisimo.

Saludos