將圖像逐個添加到點擊元素上

Question

這是fiddle example。

如何在點擊時向.area中的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