javascript - 使用 JQuery 逐个添加元素

Question

我正在尝试使用 JQuery 在表单中添加多个 div 标签:

下面是我最初的 HTML 表单:

<form action="" method="post">
            <div id="div_file0">
             <input type="file" name="files0[]" id="files0" multiple><br/>
            </div>
             <a href="#" id='more_files'>Click to add more files</a>
             After uploading multiple files, click Submit.<br>
             <input type="submit" value="Submit">
</form>

点击Click to add more files后，我想创建更多div标签，如下所示:

<form action="http://localhost:5000/api/upload_file" method="post">
            <div id="div_file0">
             <input type="file" name="files0[]" id="files0" multiple=""><br>
            </div>
            <div id="div_file1">
             <input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
            </div>

             <a href="#" id="more_files">Click to add more files</a>
             After uploading multiple files, click Submit.<br>
             <input type="submit" value="Submit">
        </form>

但是，新的 div 标记会替换现有内容，并在新创建的 div 元素中添加新旧 input 标记。

<form action="http://localhost:5000/api/upload_file" method="post">
            <div id="div_file1">
             <input type="file" name="files0[]" id="files0" multiple=""><br>
             <input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
            </div>

             <a href="#" id="more_files">Click to add more files</a>
             After uploading multiple files, click Submit.<br>
             <input type="submit" value="Submit">
        </form>

使用的Javascript如下:

<script type="text/javascript">
            $(document).ready(function() {
                $(document).on('click','#more_files', function() {
                var numOfInputs = 1;
                while($('#files'+numOfInputs).length) { numOfInputs++; }//once this loop breaks, numOfInputs is greater than the # of browse buttons
                console.log("numOfInputs:"+numOfInputs)
                $("<br/>").insertAfter("#div_file"+(numOfInputs-1));
                $("div")
                .attr("id","div_file"+numOfInputs)
                .insertAfter("#div_file"+(numOfInputs-1));

                var input = $("<input type='file' multiple/>")
                .attr("id", "files"+numOfInputs)
                .attr("name", "files"+numOfInputs+"[]");

                var remove = $("<a class='remove' href='#'>Remove file</a>")
                .attr("id","remove_file")
                .attr("name","remove_file"+numOfInputs)
                .attr("value",numOfInputs);

                $("#div_file"+numOfInputs).append(input,remove);
                });
            });
        </script>

Answer 1

这相当多余，因为您已经使用多个文件输入。

如果您确实想以这种方式执行此操作，请从要在 DOM 中重复的 HTML 内容中删除所有 id 属性。它们不是必需的，只会造成更多不必要的复杂化。然后，您可以抓取第一个 .div_file 元素，克隆它，并将其插入到表单中的 a 之前，如下所示:

$(document).ready(function() {
  $(document).on('click', '#more_files', function() {
    var $clone = $('.div_file:first').clone();
    $clone.insertBefore('form a');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  <div class="div_file">
    <input type="file" name="files[]" multiple><br/>
  </div>
  <a href="#" id='more_files'>Click to add more files</a> After uploading multiple files, click Submit.<br>
  <input type="submit" value="Submit">
</form>