如何在克隆的字段集jQuery中克隆字段集

我需要在克隆的字段集中克隆一个字段集。

所以我的规则结构是

当我单击“添加新议程字段”时，它成功克隆了更大的字段，如

但当我单击“添加新文件”时，它只会将新字段添加到父字段，而不会添加到当前字段

我的代码是

<div id="agenda_placeholder">
    <div id="agenda_template">
    <fieldset>
        <legend>Agenda Details</legend>

        <ol>
            <li>
                <label for=topic_name>Topic Name</label>
                <input id=topic_name name=topic_name type=text placeholder="ACAT Briefing" required autofocus>
            </li>
            <li>
                <label for=topic_time>Time</label>
                <input id=topic_time name=topic_time type=text placeholder="2.00 - 2.30 ">
            </li>
            <li>
                <label for=presenter>Presenter</label>
                <input id=presenter name=presenter type=text placeholder="Name LastName">
            </li>


            <li>
            <div id="file_placeholder">
            <div id="file_template">
                <fieldset>
                    <legend>File Details</legend>

                        <ol>
                            <li>
                                    <label for=file_description>File Description</label>
                                    <input id=file_description name=file_description type=file_description placeholder="Ex. Weather Stats">
                            </li>
                            <li>
                                    <label for=file_name>File Name</label>
                                    <input id=file_name name=file_name type=file_name placeholder="Exact file name Eg:weather.docx">
                            </li>
                            </ol>
                        </div> <!-- file_template -->
                     </div> <!-- file_placeholder -->   
                     <button type="button" name="AddNewFile" onclick="Add();">Add New File</button> 
                </fieldset>
            </li>
         </ol>
        </div> <!-- agenda_template -->
    </div> <!-- agenda_placeholder -->
        <button type="button" name="AddNewAgenda" onclick="Add_Agenda();">Add New Agenda Field</button>
    </fieldset>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
        var _counter = 0;
function Add() {
    _counter++;
    var oClone = document.getElementById("file_template").cloneNode(true);


    oClone.id += (_counter + "");
    document.getElementById("file_placeholder").appendChild(oClone);
}

function Add_Agenda() {
    _counter++;
    var oClone = document.getElementById("agenda_template").cloneNode(true);
    oClone.id += (_counter + "");
    document.getElementById("agenda_placeholder").appendChild(oClone);
}

议程详情

主题名称


时间


节目主持人


文件详细信息

文件描述


文件名

添加新文件

添加新议程字段
var_计数器=0；
函数Add（）{
_计数器++；
var oClone=document.getElementById（“文件模板”）.cloneNode（true）；
oClone.id+=（_counter+）；
document.getElementById（“文件占位符”）.appendChild（oClone）；
}
功能添加_议程（）{
_计数器++；
var oClone=document.getElementById（“议程模板”）.cloneNode（true）；
oClone.id+=（_counter+）；
document.getElementById（“议程占位符”）.appendChild（oClone）；
}

---

那么，如何在克隆的字段集中克隆字段集呢？

首先，您的html无效，它有重叠的标记

在

函数中添加
语句
document.getElementById（“文件\占位符”）
将返回id
文件\u占位符的第一个匹配项，这是不正确的

您需要知道单击了哪个按钮并克隆其父div
并将克隆的div附加到按钮的祖父母div

同样的逻辑也可以应用于
Add_agenda
，但是您应该注意删除添加的文件
你正在克隆人

function Add(btn) {
     _counter++;
    var parentFileTemplate = $(btn).parent("div");
    parentFileTemplate.attr('id',"file_template" + _counter );
    var parentFilePlaceHolder = parentFileTemplate.parent();
    cloned = parentFileTemplate.clone();
    cloned.attr('id',"file_template" + _counter );
    parentFilePlaceHolder.append(cloned);
  }

调用函数时，还必须添加
此
作为参数：

<button type="button" name="AddNewFile" onclick="Add();">



将是：

<button type="button" name="AddNewFile" onclick="Add(this);">


Yo dawg，我们听说你喜欢克隆，但有什么问题吗？我想是因为
div
标记，当我单击“添加文件”时，它只将文件字段添加到父字段集查看最后一张图片嗯，对于初学者来说，html似乎无效。查看红色标签：您正在克隆具有
id
s的元素。这将导致页面上重复的
id
s无效
id
s在页面上应始终是唯一的，因为它们唯一地标识元素。感谢您的解决方案，是否仍有克隆空输入字段的方法？