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

我想在我的应用程序中创建一个文件上传功能。通常我的表单包含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>

$('#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>');
})

jQuery

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

$('#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>');
})

$（“#更多”）。在（'click'，function（）上{
q=$（'.att'）。长度；
c=$（'#c1'）.html（）；
n=q+1；
f=c。替换（'c1'，'c'+n）；
$（'#c'+q）.在（''+f+''）之后；
})

你可以看到我的代码现场演示

到目前为止，一切进展顺利。但是我遇到的问题是访问新的JavaScript构建元素来命名它们。我需要有像c1，c2，c3。。。但所有新创建的元素都以“c2”命名。似乎我的代码在计算“.att”元素的长度时遇到了一些问题，因为其中只有一个是HTML本机元素，其他的是用JavaScript构建的

---

您有什么想法吗？

更新您的输入似乎更好，如下所示：

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

并以编程方式使用

FormData（）

在发布时重命名文件

---

查看一下

更新您的输入似乎是一个更好的主意，如下所示：

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

并以编程方式使用

FormData（）

在发布时重命名文件

---

看一看

，正如@Rayon所说的，您使用jQuery获得了

innerHTML

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

您必须获得

outerHTML

才能同时拥有这些属性。 您需要regex replace

/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);
})

---

正如@Rayon所说，您使用jQuery获得

innerHTML

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

您必须获得

outerHTML

才能同时拥有这些属性。 您需要regex replace

/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);
})

---

正如Rayon和其他公司先前指出的那样；问题是通过调用

.html（）

我们得到DOM元素的内部html，而不是特定DOM元素的html。所以每次只添加file元素，而不是它的container元素。因此，

$（'.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

    })
})

$（文档）.ready（函数（）{
$（“#更多”）。在（'click'，function（）上{
q=$（'.att'）。长度；
c=$（'#c1'）.html（）；
n=q+1；
f=c。替换（'c1'，'c'+n）；
$（'#c'+q）.after（''+f+''）；//不要将新文件元素放在空白div中；让我们向它添加类和id之类的属性
})
})
正如Rayon和其他公司之前指出的那样；问题是通过调用
.html（）
我们得到DOM元素的内部html，而不是特定DOM元素的html。所以每次只添加file元素，而不是它的container元素。因此，
$（'.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

    })
})

$（文档）.ready（函数（）{
$（“#更多”）。在（'click'，function（）上{
q=$（'.att'）。长度；
c=$（'#c1'）.html（）；
n=q+1；
f=c。替换（'c1'，'c'+n）；
$（'#c'+q）.after（''+f+''）；//不要将新文件元素放在空白div中；让我们向它添加类和id之类的属性
})
})
您需要对遗漏的小错误进行更正，以便将
类
和
id
添加到您正在添加的新
div

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




您需要对遗漏的小错误进行更正，以便将
类
和
id
添加到您正在添加的新
div

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





$（“#更多”）。在（'click'，function（）上{
var q=$（'.att'）.length；
c=$（'[name=“c1”]'）.clone（）.get（0）.outerHTML；
n=q+1；
f=c。替换（'c1'，'c'+n）；
$（'#c'+q）.在（''+f+''）之后；
});
input[type=file]{
边框：1px纯银；
边缘底部：5px；
填充：5px
}




$（“#更多”）。在（'click'，function（）上{
var q=$（'.att'）.length；
c=$（'[name=“c1”]'）.clone（）.get（0）.outerHTML；
n=q+1；
f=c。替换（'c1'，'c'+n）；
$（'#c'+q）.在（''+f+''）之后；
});
input[type=file]{
边框：1px纯银；
边缘底部：5px；
填充：5px
}



$（'.att'）。长度始终为1。。您没有附加
元素..委托事件处理是您需要的，我think@JaromandaX代表团需要做什么？也许没什么，我误读了报告的标题question@Ouroborus，在第..
$（'.att'）页中找到“id=“c1”。长度始终为1。。您没有附加
元素..委托事件处理是您需要的，我think@JaromandaX代表团需要做什么？也许没什么，我误读了报告的标题question@Ouroborus，在第页找到“id=“c1”..好主意，阿米尔。但这并不是我问题的答案。谢谢你，好主意，阿米尔。但这并不是我问题的答案。无论如何，谢谢你。