Select first "li" in multiple unorganized lists with jQuery
<p>Problem demo is here: <a href="http://www.studioimbrue.com" rel="nofollow">http://www.studioimbrue.com</a></p>

<p>Currently, when the page loads, all the thumbnails are triggered to dim. I'm trying to make it so that each first thumb remains at full opacity (using <code>:first</code> of course) until another thumb is clicked. I can get it to do it for the first one, but it won't iterate to each &lt;ul>. I tried using the <code>each()</code> function, but I couldn't get it to work. My JavaScript skills aren't that great so if you find a solution, just post the code and then explain (if you can).</p>

<p>Below is the current code I'm working with:</p>

<pre><code>$(document).ready(function(){
    var activeOpacity   = 1.0,
    inactiveOpacity = 0.6,
    fadeTime = 100,
    clickedClass = "selected",
    thumbs = ".thumbscontainer ul li";

    $(thumbs).fadeTo(1, inactiveOpacity);

    $(thumbs).hover(
        function(){
            $(this).fadeTo(fadeTime, activeOpacity);
        },
        function(){
            // Only fade out if the user hasn't clicked the thumb
            if(!$(this).hasClass(clickedClass)) {
                $(this).fadeTo(fadeTime, inactiveOpacity);
            }
        });
    $(thumbs).click(function() {
        // Remove selected class from any elements other than this
        var clicked, previous;
        clicked = $(this);
        if (!clicked.hasClass(clickedClass)) {
            previous = $(thumbs+'.'+clickedClass);
            previous.removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity);
            clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
        }
    });
});
</code></pre>
