jQuery syntax help - filmstrip gallery code
<p>I'm trying to make a simple gallery and can't figure out what is wrong with my jQuery syntax.</p>

<p>When the user clicks a thumbnail (one of the first three list items), I want to <code>clone()</code> the image and caption, and paste it into <code>li.expand</code> (the full-size image).</p>

<p>The first two lines of my jQuery function are working (i.e. the "selected" class) but the last two lines don't seem to be doing anything. Am I using <code>$(this)</code> wrong?</p>

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

<pre><code>&lt;ul class="gallery2"&gt;
        &lt;li&gt;
            &lt;img src="img/1.jpg" /&gt;
            &lt;p&gt;Caption 1&lt;/p&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;img src="img/2.jpg" /&gt;
            &lt;p&gt;Caption 2&lt;/p&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;img src="img/3.jpg" /&gt;
            &lt;p&gt;Caption 3&lt;/p&gt;
        &lt;/li&gt;

        &lt;li class="expand"&gt;
            &lt;!-- This space will be filled with whatever thumbnail is selected --&gt;
        &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>$(".gallery2 li").click(function () {
    $(".gallery2 li").removeClass("selected");
    $(this).addClass("selected");
    $(".gallery2 li.expand").html().remove();
    $(this).html().clone().appendTo(".gallery2 li.expand");
});
</code></pre>
