Question

我通过这样的脚本创建一个元素：

 var fileExtra = '<input type="file" style="display: none;" class="btn btn-primary uploadFileExtra">';
 $("#extraUploads").append(fileExtra);

我想将数据添加到最后插入的元素中。

我尝试了以下内容：

 var lastInput = $("#extraUploads .uploadFileExtra:last-child");
 lastInput.data("files", file);

$(".uploadFileExtra:last").data("files", file)

$(document).find(".uploadFileExtra:last").data("files", file);

但无论采用何种方式，我都会尝试使用特定类的所有元素在data-files属性中获取相同的值。

我该如何正确地做到这一点？

编辑：

方案：使用此脚本设置数据：

 $(document).find(".uploadFileExtra:last").data("files", file);

使用此脚本查看所有元素包含的数据：

我上传了2个文件，然后上传了另外两个文件direclty，但是当我检查所有输入元素的数据时，我发现他们有相同的数据是错误的。

数据1

数据2

编辑2： Fiddle

按F12键，您将看到console.log将为所有

写入相同的值

Answer 1

:last-child指的是直接父母中的子女列表中的最后一个孩子。例如，如果你有这个：

<div id="extraUploads">
    <span><input type="file" class="uploadFileExtra" /></span>
    <span><input type="file" class="uploadFileExtra" /></span>
    <span><input type="file" class="uploadFileExtra" /></span>
</div>

选择器将捕获每个input。因为每个input是其直接父级的最后一个子级（span）。

但是，你可以写下这个：

var lastInput = $("#extraUploads .uploadFileExtra").last();

您将获得页面中所有.uploadFileExtra的最后.uploadFileExtra。

Answer 2

感谢我在评论中得到的所有帮助，我从一个不同的角度来看待这个问题。

我将文件添加到每个输入的数据属性中。看起来这很快，所以我试着将它放在一个循环中，我一次发送一个文件，如下：

            for (var i = 0; i < file.length; i++) {
                addInputs(file[i]);
            }

            function addInputs(file) {

                if ($(".uploadFile").data("files") != undefined) {
                    var fileExtra = '<input type="file" style="display: none;" class="btn btn-primary uploadFileExtra">';
                    $("#extraUploads").append(fileExtra);
                    var lastInput = $("#extraUploads .uploadFileExtra:last-child");
                    lastInput.data("files", file);
                }
}

它成功了

如何将数据添加到具有特定类的最后一个元素？

2 个答案: