Trouble with .attr('title')
<p>I am trying to retrieve the title attribute and replace the current paragraph text with it. Everything else about my script is working perfectly. The title attribute is coming back as "undefined". I am new to javascript and I have looked all over for answers... nothing that I am seeing so far. </p>

<p><strong>JS:</strong></p>

<pre><code>$(document).ready(function(){

    $('.thumbnails a').click(function(e){
        e.preventDefault();

        $('.thumbnails a').removeClass('selected');
        $('.thumbnails a').children().css('opacity','1');

        $(this).addClass('selected');
        $(this).children().css('opacity','.4');

        var photo_caption = $(this).attr('title');
        var photo_fullsize = $(this).attr('href');
        var photo_preview = photo_fullsize.replace('_large','_preview');

        $('.preview').html('&lt;a href="'+photo_fullsize+'" title="'+photo_caption+'" style=background-image:url('+photo_preview+')&gt;&lt;/a&gt;');

        $('.caption').html('&lt;p&gt;&lt;a href="'+photo_fullsize+'" title="'+photo_caption+'"&gt;View larger&lt;/a&gt;&lt;/p&gt;&lt;p&gt;'+photo_caption+'&lt;/p&gt;');
    });
});
</code></pre>

<p><strong>HTML:</strong></p>

<pre><code>&lt;li&gt;
   &lt;a href="images/webdesign/indiePantry_large.jpg" target="_blank"&gt;
      &lt;img src="images/webdesign/indiePantry_thumbnail.jpg" 
             width="160" height="160" title="Indie Pantry" /&gt;
   &lt;/a&gt;
&lt;/li&gt;
</code></pre>
