Page 1 of 1

jQuery:how to select "span" tag within "a" tag?

Posted: Sat Oct 23, 2010 10:19 am
by aakash.lpin
HTML CODE

Code: Select all

<a href="images/bands/Avenged_Sevenfold.jpg" class="as">
<img src="images/bands/Avenged_Sevenfold.jpg" alt="" />
<span> Avenged Sevenfold</span>
</a>
jQuery Code

Code: Select all

var newClass = $(a).attr("class");
var newText = $("." + newClass).add("span");          //now here is d problem: how do i select only the span tag ? this statement here does not work
ENTIRE problem background:

i am making a image gallery. set of 9 images' thumbnails are displayed at a time. when a thumbnail is clicked, full image appears besides the thumbnails.
Now i want to add the image description in a div tag besides the full image. But i'm not able to figure out how to do that.

part of the source code is :

HTML:

Code: Select all

<ul class="thumb">
	<li><a href="images/bands/30SecondsToMars.JPG" class="30stm"><img src="images/bands/30SecondsToMars.JPG" alt="" /><span> 30 seconds to mars</span></a></li>
	<li><a href="images/bands/Avenged_Sevenfold.jpg" class="as"><img src="images/bands/Avenged_Sevenfold.jpg" alt="" /><span> Avenged Sevenfold</span></a></li> 

   </ul>

<div id="description" class="border">    	
	</div>
jQuery:

Code: Select all

$("ul.thumb li a").click(function() {

		var mainImage = $(this).attr("href"); //Find Image Name
                $("#main_view img").attr({ src: mainImage });  //to dislpay the full image		

                var newClass = $(this).attr("class");	//Fine the class name
		var newText = $("." + newClass).add("span");                              /////////DOESN'T WORK!! need an alternate!!

		$("#description").html(newText);    //add the text to the description
		return false;		
	});





scottayy wrote:Please use syntax tags when posting code.

Re: jQuery:how to select "span" tag within "a" tag?

Posted: Sat Oct 23, 2010 10:48 am
by Eran
you should read about traversing the DOM using jquery - http://api.jquery.com/category/traversing/

Code: Select all

$("ul.thumb li a").click(function() {
    var description = $(this).find('span').html();
    ...
});

Re: jQuery:how to select "span" tag within "a" tag?

Posted: Sat Oct 23, 2010 11:10 am
by aakash.lpin
OMG!! thanks a lot man!! that seemed fairly simple. just a neewbie :lol: