单击时将图像逐个添加到元素中

Question

这是fiddle example。

如何在点击时将.area中的div元素逐个添加到div元素中？无论先点击什么图像，我都希望它占据第一个div（leftest），然后下一个点击的图像将转到第二个div。

Jquery的：

$('.compare').click(function(){
  var getimage = $(this).closest('.box').find('img').attr('src');
  $('#area > div').html('<img src="'+getimage+'"/>') 

});

$(document).on('click','#area > div > img',function(){
  $(this).remove();
}); 

HTML：

<div class="box">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_run.png/40px-Crystal_Clear_action_run.png"/>
<input class="compare" type="radio"/>
</div>

<div class="box">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png"/>
<input class="compare" type="radio"/>
</div>

<div id="area"><div></div><div></div><div></div></div>

Answer 1

1. 构建图像并为其指定src属性
2. 使用div:empty:first选择器

示例：

$('.compare').click(function(){
    var img = $('<img>');
    img.attr('src', $(this).closest('.box').find('img').attr('src'));
    $('#area').find('div:empty:first').append(img);
});

<强> DEMO