0

我有一个表格，要求用户输入家庭成员的详细信息。我想显示一个家庭成员的字段，然后有一个按钮说“单击以添加另一个家庭成员”，我的问题是 - 我如何使用 jQuery 在下面添加家庭成员 div/fieldset 的精确副本单击时现有的？

<form method="post" action="">
    <div class="family-member">
        <ul>
            <li>
              <label for="first-name">First Name</label>
              <input type="text" name="first-name">
            </li>
            <li>
              <label for="surname">Surname</label>
              <input type="text" name="surname">
            </li>
        </ul>
    </div>
    <a>Click to add another family member</a>
</form>
4

3 回答 3

2

如何获取 ul 元素并在其.html()上调用函数，然后使用or函数将其附加到<a>标记中。例如append().after()

var formHtml = $("ul").html();
$("a").append(formHtml);
于 2013-09-29T12:15:39.927 回答
2

工作代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
    $('#add_more').click(function(e) {
        $(this).before($('.family-member:eq(0)').html());
    });
});
</script>
</head>

<body>   
<form method="post" action="">
    <div class="family-member">
        <ul>
            <li>
              <label for="first-name">First Name</label>
              <input type="text" name="first-name">
            </li>
            <li>
              <label for="surname">Surname</label>
              <input type="text" name="surname">
            </li>
        </ul>
    </div>
    <a id="add_more" href="javascript:void(0);">Click to add another family member</a>
</form> 
</body>
</html>
于 2013-09-29T12:21:03.790 回答
1

使用html和append方法：

var html = $('.family-member:eq(0)').html();
$('form').append(html);

eq(0)用于仅克隆第一个“家庭成员” 。

于 2013-09-29T12:17:35.067 回答