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

Question

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

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 和 name，你可以使用这个 JS fiddle 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 会改变属性，但是第一个 input 元素不会改变。

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

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

然后更改属性：

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