Using $(this) along with .parent() and .children(' :first-child') issues

Using $(this) along with .parent() and .children(' :first-child') issues

Let me first begin with what I am doing. I am trying to build a gallery like script for my website as I type this. Many of you would say why don't you use one of the hundreds of gallery plug-ins for jquery... my answer is this; they dont suffice everything that I want in a gallery and I want to learn Jquery along with it. 
So now that I have that out of the way let me digg into the problem. 

What I am trying to achieve is when I click on one of the four thumbnail images, I want it to pass it's alt to either the image's source, OR the parent div's background image. I have tried a ton of combinations of selectors, and after about a week of failing miserably, I am turning to the forums to see if I can get a fresh perspective.

The issue I seem to be struggling with here is isolation of one gallery from the next, since I will be running this multiple times on my site. I need to tell the script to not change all the divs named place holder, but just the one right above it. 

If you know of any tutorials or have some advice for this, It would be greatly appreciated. 

Thanks in advance for any help.

Here is what I have for html on just a dummy experiment page to test the idea.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <script type="text/javascript" language="javascript" src="js/jquery-1.4.1.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style/stylesheet.css" />
    <title>Test</title>
    </head>
    <body>

    <div class="placeholder">
        <img src="style/images/1.png"/>
        <a href="#" alt="style/images/1.png" class="thumbs" class="floatleft"><img src="style/images/1t.png"/></a>
        <a href="#" alt="style/images/2.png" class="thumbs" class="floatleft"><img src="style/images/2t.png"/></a>
        <a href="#" alt="style/images/3.png" class="thumbs" class="floatleft"><img src="style/images/3t.png"/></a>
        <a href="#" alt="style/images/4.png" class="thumbs" class="floatleft"><img src="style/images/4t.png"/></a>
    </div>

    <div class="placeholder">
        <img src="style/images/1.png"/>
        <a href="#" alt="style/images/2.png" class="thumbs" class="floatleft"><img src="style/images/1t.png"/></a>
        <a href="#" alt="style/images/2.png" class="thumbs" class="floatleft"><img src="style/images/2t.png"/></a>
        <a href="#" alt="style/images/3.png" class="thumbs" class="floatleft"><img src="style/images/3t.png"/></a>
        <a href="#" alt="style/images/4.png" class="thumbs" class="floatleft"><img src="style/images/4t.png"/></a>
    </div>



    <script type="text/javascript" language="javascript">


    $("a.thumbs").click(function() {

    var source = $(this).attr("alt");
    $(this).parent() .children(’:first-child’).attr("src", source);

    });


    </script>

    </body>
    </html>