在一行浮動元素中的最後一個元素後追加元素

Question

我有以下標記，一個可以容納動態數量的浮動元素的包裝。 3種元素的最大值可以通過並排放置（= 1行）

<div class="wrapper clearfix"> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
</div> 

浮動元件具有其中一個新的元素應的行所點擊的最後一個元素之後添加一個點擊事件（jQuery的）元素「在」中。所以，如果例如我點擊1元對我最終withthis：

<div class="wrapper clearfix"> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="addElement"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
</div> 

，或者如果我在第5個元素上點擊我得到

<div class="wrapper clearfix"> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="floatLeft"></div> 
    <div class="addElement"></div> 
    <div class="floatLeft"></div> 
</div> 

等。

我想過使用nth-child選擇器，但我無法正常工作。

編輯： 我不想在包裝中包裝每個3 .floatLeft元素。

Answer 1

上點擊，做到這一點 -

$('.floatLeft').on('click',function(){ 
    $(this).closest('.wrapper').append("<div class='addElement'></div>"); 
}); 

演示----->http://jsfiddle.net/xQ7hh/2/

Answer 2

$('.floatLeft').click(function(){ 
    $(this).after('<div class="addElement"></div>'); 
}); 

And the jsFidde