Question

If you click on a cell on this page, it loads the larger version of the image. I’m trying to achieve this same effect.

What I have gotten so far: http://jsfiddle.net/8mYW9/

First off I know having the "appear" <div> is redundant – is there a good way to utilize $(this) and appendTo(); instead?

Ultimately my idea is to grab the id of the anchor contained within the div that is clicked and to append it to the cell. What should I be doing…?

Answer 1

If you change the ID attribute to class for the appear elements you can do this:

$(document).ready(function() {
    $('#appear').hide();
    $('.links').click(function() {
        var $this = $(this);//cache the $(this) selector since it will be used more than once
        $this.children('.appear').html('item id: ' + $this.children('a').attr('id')).fadeToggle('slow');
    });
});

Demo: http://jsfiddle.net/8mYW9/7/

BTW you can’t have multiple elements with the same ID in a HTML document.