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

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. 元素，我最终会得到以下结果：

<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>');
});

和 jsFidde