用jQuery克隆

Question

我有一个允许用户推荐朋友的表单。我想在两个输入字段下面添加一个链接，“朋友电子邮件”和“朋友姓名”，它将克隆“朋友邮箱”一次并在下面添加。此外，“朋友电子邮件”和“朋友姓名”的名称属性为name="friend_email[0]"和name="friend_name[0]"，建议为here。克隆和递增下标的最佳方法是什么？这是代码：

<div class="friend-box">

    <div class="field">
        <span><label for='friend_name'><strong>Friend's Name *</strong></label> </span>
        <input id='friend_name' name='friend_name[0]' type='text' />
    </div>

    <div class="field">
        <span><label for='friend_email'><strong>Friend's Email *</strong></label></span>
        <input id='friend_email' name='friend_email[0]' type='text' />
    </div>

</div>

最好的方法是什么？我遇到的一个问题是，当我克隆“朋友盒”一次然后两次时，它显然会以指数方式克隆它。所以我猜我需要在那里有一个ID号并增加它。或者，我看到的另一种方法是在页面加载时克隆“friend-box”并继续从内存中克隆它。

谢谢， 莱恩

Answer 1

你不需要指定索引[0]，只要你把[]浏览器自动递增索引。

至于你的问题，我会这样做：http://jsfiddle.net/EJv4g/3/

基本上，我添加了一个包裹所有朋友框的div.friend-boxes。我使用jQuery获取第一个朋友框，克隆它然后重置输入字段值（如果它们被填充）。然后我将其附加到.friend-boxes元素。

如果您希望将append添加到prepend，可以将其更改为{{1}}。

希望这有帮助！

• 基督教

Answer 2

我在这里创建了一个例子： http://jsfiddle.net/K8hhW/5/

您无需担心增加括号中的数字，表单会自动为您执行此操作。