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

And the jsFidde

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

2 个答案: