javascript/jquery 变异并在 var 中追加 html

Question

我有一个像这样的简单数组:

var arr = ['string_1', 'string_2'];

我得到了以下 html(经过简化，但原始内容非常大):

var html = '<div><input class="myInput" type="text"></div>'

我需要将这个 html 变量附加到我的 DOM 中的 #main_div，但填充了来自 arr 的值，所以在这种情况下应该是 2 个输入，填充有 string_1 和 string_2。

我尝试了以下代码:

$.each(arr, function(k, v){
          $(html).find('.myInput').val(v);
          $('#main_div').append(html);//mutated html var should be here
       });

但我得到 2 个空输入。欢迎提出任何修复方法的想法。谢谢

Answer 1

您的逻辑几乎就绪，但问题是您没有存储从 html 字符串创建的 jQuery 对象，因此您只需附加未更改的原始值。试试这个:

var arr = ['string_1', 'string_2'];
var html = '<div><input class="myInput" type="text"></div>'

$.each(arr, function(i, v) {
  var $html = $(html).find('.myInput').val(v).end();
  $('#main_div').append($html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_div"></div>

请注意 end() 的使用，它返回最初选择的元素(在本例中是 html 字符串中的外部 div)来自 find() 调用的 .myInput 元素。

最后，您需要为 input 元素提供 name 属性以确保它们仍然是有效的 HTML。