在一行浮动元素中的最后一个元素后追加元素

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