javascript - 配列の長さをカウントし、JS/jQuery で同じ量の HTML 要素を作成する

Question

配列の長さを照会してから、JS/jQuery を使用してクライアント側で同じ量の新しい HTML 要素を作成することは可能ですか?

私が配列用に持っているコードは次のとおりです。

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

alert(psC1.length);

配列に 3 つの項目があることを警告します。ページに 3 つの iframe を作成し、配列を各要素の src 属性にインデックス付けします。

配列を使用して iframe の src を挿入するために使用するコードは次のようになります。

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

私が苦労しているのは、配列を数えた後、JS/jQuery で 3 つの iframe を作成することです。

score 2 · Accepted Answer

iframejQuery でを作成するには、$関数を使用します (または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