Question

我需要创建一个空的JQuery元素作为循环的外部作用域列表，例如：

const forms_data = ['Name', 'Email'];

const form = $();
for (const input_name of forms_data){
  form.insertAfter(`<input placeholder="${input_name}" / >`)
  form.append(`<input placeholder="${input_name}" / >`)
  form.after(`<input placeholder="${input_name}" / >`)
}

$('form').append(form);

但是没有一种方法可以为我添加新元素，根据其他答案，$（）似乎是正确的方法。

我不想要一个外部div，我希望所有插入的元素都是兄弟姐妹。

我做错了什么？

jsFiddle：https://jsfiddle.net/Lusfektu/16/

Answer 1

您应该创建此$('<form>)之类的表单元素，然后您可以使用append方法。

const forms_data = ['Name', 'Email'];
const form = $('<form>');

forms_data.forEach(name => {
  form.append($('<input>', {placeholder: name}))
})

$('body').append(form);

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

更新：您可以使用reduce创建输入数组或jquery对象，然后将该数组追加到表单元素中。

const forms_data = ['Name', 'Email'];

const inputs = forms_data.reduce((r, name) => {
  r.push($('<input>', {placeholder: name}))
  return r;
}, [])

$('form').append(inputs)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action=""></form>

Answer 2

您使用$()是正确的，但这些API不起作用。而是使用.add()：

form = form.add($(`<input placeholder="${input_name}" / >`));

正如另一个答案所指出的，如果您将元素初始化为<form>元素，那么可以使用其他API，但如果您已经有<form>在页面上那将是有问题的。在这种情况下，您可以将容器初始化为无效的内容，例如<div>或<span>。

Answer 3

如果你要做的只是创建输入并将它们附加到表单，你可以使用一个简单的数组，或映射元素。 $.map可用于循环数组，创建新元素，并在结尾处将它们作为列表返回。使用它，我们可以创建数组，然后将它们一次性地附加到表单中。

const forms_data = ['Name', 'Email'];

$('form').append($.map(forms_data, function(element){
  return `<input placeholder="${element}" / >`;
}));

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

Answer 4

这应该这样做：

const form = $('<form>');

然后就像在样本的第二行上一样使用append。

如何创建一个空的JQuery元素并填充它？

4 个答案: