jQuery - 在最后一个匹配的 div 之后点击添加新的 div

Question

我想在点击 @ 最后一场比赛结束时添加新的 div。

    <form id="form">
        <div class="border item-block">
            <p><b>Color :</b> silver </p>
            <input type="hidden" name="available_colors[silver][color_name]" value="silver">
            <input type="text"  name="available_colors[silver][color_image]" value="SM-9436RE_B_BEAUTY.JPG">
        </div>
        <a style = "float : left; margin-top: 50px" class="button add">Add</a>
    </form>

单击时，我想创建输入为该属性的 div available_colors[NEW][0][color_name] 等等。

像这样

    <form id="form">
                <div class="border item-block">
                    <p><b>Color :</b> silver </p>
                    <input type="hidden" name="available_colors[silver][color_name]" value="silver">
                    <input type="text"  name="available_colors[silver][color_image]" value="SM-9436RE_B_BEAUTY.JPG">
                </div>
                <div class="border item-block">
                    <p><b>Color :</b> <input type="text" name="available_colors[NEW][0][color_name]" value=""></p>
                    <input type="text"  name="available_colors[NEW][0][color_image]" value="">
                </div>
                <a style = "float : left; margin-top: 50px" class="button add">Add</a
     </form>

第二次点击想要添加这个div

<div class="border item-block">
        <p><b>Color :</b> <input type="text" name="available_colors[NEW][1][color_name]" value=""></p>
        <input type="text"  name="available_colors[NEW][1][color_image]" value="">
 </div>

我尝试了这种方法，但没有被归档。我试图克隆最后一个 div，但我不知道如何切换所有输入名称属性。

$('a.add').click(function(){
        var form, fields;
        //$('.item-block').last().clone().insertAfter($('.item-block').last());
        form = $("#form");
        fields = form.find("input[name^='available_colors[NEW]']");
        alert(fields[0]);
    });

有人可以告诉我这个吗？

提前谢谢你。

Answer 1

我建议使用 jquery .after() 方法: after() - jQuery API . 所以你可以像这样使用它:

$('a.add').click(function(){
    // get a handle on the last instance of the div
    var lastDiv = $('#form').find('div.item-block').last();

    // create the new div you want to add
    var newDiv = lastDiv.clone();
    newDiv.find('input').attr('name','available_colors[NEW][1][color_image]');

    // add the new div after the last instance of the item-block div
    lastDiv.after(newDiv);
}