javascript - 计算数组的长度并使用 JS/jQuery 创建相同数量的 HTML 元素

Question

是否可以查询数组的长度，然后使用 JS/jQuery 在客户端创建相同数量的新 HTML 元素？

我对数组的代码是：

var psC1 = [
'item1',
'item2',
'item3'
];

alert(psC1.length);

这将提醒数组中有 3 个项目。我现在想在页面上创建三个 iframe，并将数组索引到每个元素的 src 属性中。

我用来使用数组插入 iframe 的 src 的代码是：

  $('.test-iframe').each(function() {
    $(this).attr('src', psC1[$(this).index()]); 
   });

我正在努力计算数组后，使用 JS/jQuery 创建三个 iframe。

score 2 · Accepted Answer

要使用 jQuery 创建一个iframe，请使用该$函数（或jQuery在无冲突模式下）：

$("<iframe>").appendTo(document.body);

当然，您不必附加到正文，您可以将 iframe 放在您需要的任何地方。

在你的情况下，也许是这样的：

$.each(psC1, function(index, value) {
    $("<iframe>").attr("src", value).appendTo(document.body);
});

$.each循环遍历数组条目。

score 1 · Accepted Answer

for (var x = 0; x < psC1.length; x++) {
   $("<iframe>", {'src': x}).appendTo("body");
}

$("<iframe>")语法创建元素。.appendTo将其添加到 DOM。请注意，这只会创建源为“0”、“1”和“2”的 iframe，因此您可能需要'/some/path/?page=' + x类似src.

请注意，您也可以使用$.each而不是普通for循环，但它更昂贵，而且在我看来，没有必要。

score 0 · Accepted Answer

您可以使用循环来创建 HTML

var iframeHTML = "";
for (int i = 0; i < count; i++)
{
    iframeHTML += "<iframe class='test-iframe'></iframe>";
}

然后将 HTMLString 附加到您想要的位置。

score 0 · Accepted Answer

您可以使用以下方法使这个更清洁jQuery.map：

$('body').append($(psC1).map(function (i, src) {
    return $('<iframe>').attr('src', src);
}).get());

4 回答 4