jQuery y this

[Raulmmmm]

¡Hola de nuevo! Me alegro de que los foros vuelvan a estar en funcionamiento, y ahora quiero hacer uso de ellos, pues ya busqué por Google pero no me sale.

En fin, voy al grano. Estoy empezando con jQuery y quiero hacer que, al pinchar sobre un título, en un div de abajo se muestre la información de ese título, su foto y una descripción. Consigo que me muestre el título, pero la foto y la descripción no.

Este es el HTML:

Código HTML:

<div id="instrucciones">
<div class="paso">
<h4><a href="#">Paso 1</a></h4>
<div class="foto"><img src="i/proyectos/1/100_1267.JPG" /></div>
<p>Coge la botella, y, con el cúter, corta su parte superior, a unos 2cm desde donde empieza el tapón.</p>
</div>
<div class="paso">
<h4><a href="#">Paso 2</a></h4>
<div class="foto"><img src="i/proyectos/1/100_1268.JPG" /></div>
<p>Ahora, coge el tapón y córtale su parte superior.</p>
</div>
</div>
<div class="fle">
<h3>Foto</h3>
<div class="foto">
<img src="http://i233.photobucket.com/albums/ee218/Raulmmmm/1000544uv5.jpg" /></div>
</div> 

Y este el Javascript:

Código:

$(".paso h4").click(function (){
titulo = $(this).text();
instruccion = $(this+" + p").text();
imagen = $("this + .foto img").attr("src");
todo = '<h3>'+titulo+'</h3><div class="foto"><img src="'+imagen+'" /></div><p>'+instruccion+'</p>';
$(".dostercios .fle").html(todo);
});

Esta línea funciona:

Código:

titulo = $(this).text();

Pero no sé cómo escribir estas líneas, porque de esta forma no funcionan:

Código:

instruccion = $(this+" + p").text();
imagen = $("this + .foto img").attr("src");

¿Alguien sabe qué puedo hacer? Hay un ejemplo online en la página que estoy haciendo, Por tí mismo.

[venkman]

Código javascript:

instruccion = $("p", $(this).parent()).text();
imagen = $("img", $(this).parent()).attr("src");
 

Lo que haces con $("selector", objeto) es lo mismo que con $("selector") sólo que se busca únicamente dentro de ese objeto, no dentro de toda la página. En tu caso lo que quieres buscar es el <p> o el <img> que está dentro del parent() del título. El parent() del título es el <div> con class="paso" en cada caso.

Otra forma de ponerlo es usando siblings():

Código javascript:

instruccion = $(this).siblings("p").text();
imagen = $(this).siblings("img").attr("src");
 

Que lo que hace es buscar los hermanos del elemento con el selector indicado.

[Raulmmmm]

¡Muchas gracias, ya me funcionó! Además, me lo has explicado muy bien y creo que ya lo entiendo .