更改多个选择器上的多个属性不起作用？

Question

我正在尝试学习和理解jquery，我遇到了多个选择器的问题。当我在我的一个选择器中有一个克隆的jquery对象时，我似乎无法更新属性，id和名称。

HTML

<div class="File">
    Choose a file:
<input id="File0" name="File0" type="file" />
</div>

<input id="AddFile" type="button" value="Add a File" />

<div id="div1"></div>
<div id="div2"></div>

Jquery的

 var lastId = 0;
$(document).ready(function () {
        $("#AddFile").click(function () {
            var id = "File" + ++lastId;
            var myInput = $(".File:first").clone(true);

            // Why doesn't this update the input of type 'file' 
            // on the page when selecting multiple selectors?
            $("input:file", myInput ).attr({ id: id, name: id });

             //But if you have omit 'myInput' like this, it will work.
             // $("input:file").attr({ id: id, name: id });

             //This will also work
             //$('#div1, #div2').attr({ id: id, name: id });

             //If I add in the cloned object at the end, it will only
             //modify the input element and not the div with class=File
             //imyInput.insertBefore("#AddFile");
        });
 });

当我运行上面的代码时。无论我点击AddFile按钮多少次，dom仍会读取id =“File0”name =“File0”type =“file”。“

Answer 1

您没有对克隆对象执行任何操作。添加克隆对象或替换现有对象。

注意：使用.clone（）方法时，您可以在（重新）将它们插入文档之前修改克隆元素或其内容。（http://api.jquery.com/clone/）

如果您只想更新ID和名称，可以使用此JS小提琴 http://jsfiddle.net/adiioo7/22wja/2/

JS： -

$(document).ready(function () {
    var lastId = 1;
    $("#AddFile").click(function () {
        var id = "File" + ++lastId;
        var myInput = $(".File:first");

        $(myInput).attr({
            id: id,
            name: id
        });

    });
});

Answer 2

似乎工作正常。我已初始化var lastId并使用appendTo（）将克隆放入页面中：

http://jsfiddle.net/yWVhC/2/

var lastId = 0;

$("#AddFile").click(function () {
    var id = "File" + ++lastId;
    var myInput = $(".File:first").clone(true).appendTo('body');

    // Why doesn't this update the input of type 'file' 
    // on the page when selecting multiple selectors?
    $("input:file", myInput).attr({
        id: id,
        name: id
    });
});

如果不能解决问题，你需要更加清楚这个问题。

Answer 3

试试这个：http://jsfiddle.net/fcscd/1/

$(document).ready(function () {

  var lastId = 0;
  $("#AddFile").click(function () {
      var id = "File" + (++lastId);
      var myInput = $(".File:first").clone(true).insertAfter(".File:last");

      myInput.attr({
          id: id,
          name: id
      });
  });
});

克隆并在最后<div class="File">之后插入元素，然后更新属性

Answer 4

这在jQuery中无效：

$("input:file", myInput ).attr({ id: id, name: id });

在上面，myInput将更改属性，但第一个输入元素不会更改。

首先将克隆的对象添加到DOM：

var myInput = $(".File:first").clone(true).appendTo("body");

然后更改属性：

myInput.attr({ id: id, name: id });