JQuery附加到父div

时间:2011-02-02 13:13:58

标签: javascript jquery

对于以下html:

<div class="section grouping">
    <div class="sectionControl">
        <div class="parent row errorOn">
            <div class="validGroupControl">
                <div class="row2 itemWrap clearfix">
                    <label>Login1 (adress e-mail)<span class="iconReq">&nbsp;</span>:</label>
                    <input type="text" class="text">
                </div>
                <div class="itemWrap clearfix">
                    <label>Input field1<span class="iconReq">&nbsp;</span>:</label>
                    <input type="password" class="text">
                </div>
                <a href="#" class="iconClose" onclick="$(this).closest('div.parent').remove();" title="remove">remove</a>
            </div>
        </div>
    </div>
    <div class="row addControl">
        <a href="#" class="button" onclick="$('div.sectionControl').append($('div.sectionControl div.parent:last').html());">Add</a>
    </div>
</div>

我希望它能够执行以下操作: 点击“添加”按钮需要<div class="parent...">并将其附加到<div class="sectionControl">

我非常想要它,所以当我点击添加按钮时,新的<div class="parent"将被添加到上一个<div class="parent...">下方和上方:

                     </div>
                     <div class="row addControl">

当我尝试使用parent()时,如下所示:

alert($('div.sectionControl div.parent:last').parent().html())

我得到重复。因此,而不是只添加一个我得到的原始+我刚刚添加的。我不知道如何处理这个问题。

谢谢

1 个答案:

答案 0 :(得分:5)

首先,将内联onclick代码取出并使用jQuery附加:

$('div.addControl a.button').click(function () {
    var parent = $(this).closest('.section.grouping').find('.parent:last');
    parent.after(parent.clone());
});

请注意'.parent:last',它只会选择一个的div。