对于通过 html 元素和追加仅追加到最后一个元素答案

【问题标题】：For through html elements and appending only appends to last element对于通过 html 元素和追加仅追加到最后一个元素
【发布时间】：2017-08-24 14:29:26
【问题描述】：

我有一个文本输入和焦点输出，我有几个选择元素，我想用文本字段的值填充它们。

我有一堆带有“NameSelect”类的选择标签

$('.textField').focusout(function() { 
   var name = $(this).val();

   var NameOption = $('<option>', { value: name, text: name, attrid: '1'});

   var selects = $('#mainForm').find('.NameSelect');

   $(selects).each(function(i, obj) {
       console.log($(obj));  // it seems to get the right select
       $(obj).append(NameOption);
   })
}

但是，当我这样做时，即使选择获得了所有正确的元素并 for 循环获得正确的计数，它也只会将选项输入附加到最新的对象，而不是全部。

我在这里错过了什么？

【问题讨论】：

selects 已经是一个 jQuery 对象。那你为什么要$(selects)..？
当您将其设置为 var 时，它只是在移动那个（它只创建了一个 dom 元素）-您只需在每个循环中附加 $('<option>', { value: name, text: name, attrid: '1'}) 或放置 var在每个循环中（这样它每次都会创建一个新的 var / 元素）
@hindmost ye，我错过了。糟糕的实践。但它根本没有改变任何东西
@Pete 所以我需要在 for 循环中移动 var option？
是的，这应该可行 - 但我认为 Rory 的解决方案更好

标签： javascript jquery html for-loop append

【解决方案1】：

问题是因为NameOption 持有对option 的引用，因此如果您多次append() 它会在每个父元素之间移动。

要解决此问题，您可以在附加元素时clone() ：

selects.append(NameOption.clone());

或者您可以只为append() 提供一个字符串，以便在每次调用它时创建一个新元素：

$('.textField').focusout(function() { 
   var name = $(this).val();
   $('#mainForm').find('.NameSelect').append('<option value="' + name + '" attrid="1">' + name + '</option>');
   })
});

请注意，在这两种情况下，each() 都不是必需的。

【讨论】：