如何使用 jQuery 访问 JavaScript 个构建元素？

Question

我想在我的应用程序中创建文件上传功能。通常我的表单包含 1 个文件字段。但我想让用户在需要时拥有更多。所以我以这种方式创建它：

HTML

<div class="att" id="c1">
    <input type="file" name="c1" size="200" /><br>
    <input type="button" value="Add more files" id="more" />
</div>

jQuery

$('#more').on('click',function(){
    q = $('.att').length;
    c = $('#c1').html();
    n = q + 1;
    f = c.replace('c1','c'+n);
    $('#c'+q).after('<div>'+f+'</div>');
})

您可以看到我的代码现场演示 here。

到目前为止，一切正常。但我遇到的问题是访问新的 JavaScript 构建元素来命名它们。我需要具有名称如 c1、c2、c3 等的文件字段，但所有新创建的元素的名称都为 "c2"。似乎我的代码在计算“.att”元素的长度时存在一些问题，因为其中只有一个是 HTML 原生元素，而其他元素是使用 JavaScript.

构建的

你有什么想法吗？

Answer 1

将您的输入更新如下似乎是个更好的主意：

<input type="file" id="fileUpload" multiple />

并在发布时以编程方式使用 FormData() 重命名您的文件。

看看https://developer.mozilla.org/en/docs/Web/API/FormData

Answer 2

正如@Rayon 所说，您将通过使用 jQuery

获得 innerHTML

c = $('#c1').html();

您必须获得 outerHTML 才能同时拥有这些属性。并且您需要正则表达式替换 /c1/g 来替换所有出现的字符串。你的代码应该是这样的：

$('#more').on('click',function(){
    q = $('.att').length;
    c = $('#c1')[0].outerHTML;
    n = q + 1;
    f = c.replace(/c1/g,'c'+n);
    $('#c'+q).after(f);
})

Answer 3

正如 Rayon 和其他人之前指出的那样；问题是通过调用 .html() 我们得到 DOM 元素的内部 html 而不是特定 DOM 元素的 html 。所以每次只添加文件元素而不是它的容器元素。因此 $('.att').length 返回的计数为 1。要克服这个问题，您可以尝试使用以下代码：

$(document).ready(function(){
  $('#more').on('click',function(){
        q = $('.att').length;
        c = $('#c1').html();

        n = q + 1;
        f = c.replace('c1','c'+n);

        $('#c'+q).after('<div class="att" id="c'+n+'" >'+f+'</div>'); //instead of putting new file element in blank div; lets add attrs like class and id to it

    })
})

Answer 4

您需要进行小的更正，以便将 class 和 id 添加到您正在添加的新 div

    $('#c'+q).after('<div class="att" id="c'+n +'">'+f+'</div>');

更正示例

$('#more').on('click',function(){
        q = $('.att').length;
        c = $('#c1').html();
        n = q + 1; 
        f = c.replace('c1','c'+n);
        $('#c'+q).after('<div class="att" id="c'+n +'">'+f+'</div>');  console.log(f);
    })

input[type=file] {
  border: 1px solid silver;
  margin-bottom:5px;
  padding: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="att" id="c1">
    <input type="file" name="c1" size="200" />
</div>
<br>
<input type="button" value="Add more files" id="more" />

Answer 5

$('#more').on('click', function() {
  var q = $('.att').length;
  c = $('[name="c1"]').clone().get(0).outerHTML;
  n = q + 1;
  f = c.replace('c1', 'c' + n);
  $('#c' + q).after('<div class="att" id="c'+n+'">' + f + '</div>');
});

input[type=file] {
  border: 1px solid silver;
  margin-bottom:5px;
  padding: 5px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="att" id="c1">
  <input type="file" name="c1" size="200" />
  <br>

</div>
<input type="button" value="Add more files" id="more" />

如何使用 jQuery 访问 JavaScript 个构建元素？

How to access JavaScript built elements using jQuery?

html

javascript

jquery

dom

element