Question

I’m trying to make a simple gallery and can’t figure out what is wrong with my jQuery syntax.

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

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 $(this) wrong?

HTML

<ul class="gallery2">
        <li>
            <img src="img/1.jpg" />
            <p>Caption 1</p>
        </li>
        <li>
            <img src="img/2.jpg" />
            <p>Caption 2</p>
        </li>
        <li>
            <img src="img/3.jpg" />
            <p>Caption 3</p>
        </li>

        <li class="expand">
            <!-- This space will be filled with whatever thumbnail is selected -->
        </li>
</ul>

jQuery

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

Answer 1

html() returns a string, not a jQuery object. Perhaps you mean to use children()? Additionally, rather than use .children().remove(), you can use empty(). With those changes:

$(".gallery2 li").click(function () {
    $(".gallery2 li").removeClass("selected");
    $(this).addClass("selected");
    $(".gallery2 li.expand").empty();
    $(this).children().clone().appendTo(".gallery2 li.expand");
});

You might also consider using siblings() to select sibling elements:

$(".gallery2 li").click(function () {
    var me = $(this);
    me.siblings().removeClass("selected");
    me.addClass('selected');
    me.siblings('.expand').empty().append(me.children().clone());
});

And if we’re going to go to all that trouble, why not make it more generic by turning it into a plugin?

$.fn.gallerize = function() {
    this.on('click', 'li', function() {
        var me = $(this);
        me.siblings().removeClass('selected');
        me.addClass('selected');
        me.siblings('.expand').empty().append(me.children().clone());
    });
};

Then it’s this simple to make a gallery:

$('.gallery2').gallerize();

Try it on JSFiddle.