javascript - jquery 动态创建 iframe 并将这些 iframe 填充到特定的 div

Question

所以，基本上我需要的是...在我的 jsp 上，我为 div 设置了 iframe，它将由 jquery 生成

<div class="tab-content shelf-content">
   <div class="iframe-content-1"></div>
   <div class="iframe-content-2"></div>
   <div class="iframe-content-3"></div>
   <div class="iframe-content-4"></div>
</div>

现在在我的 js 中。我创建了一个循环，我希望动态创建 4 个 iframe 并将它们一一附加到 div，这是我的代码

function populateShelfItems(selectedAlphabet, selectedNumber){
    for (var i=1; i<=4; i++) {
        $('<iframe />', {
            src: '/item?alphabet=' + selectedAlphabet + '&numberCategory=' + selectedNumber + '&shelfNumber=' + i
        }).appendTo('iframe-content-'+i);
    }
}

但是我没有在页面上显示任何内容....所有这些 div 都是空的...

Answer 1

1) 去掉多余的iframe你正在创造

2) 在 appendTo函数你应该指定一个 class使用 . 匹配您的元素(点)，你错过了

将您的代码更改为:

function populateShelfItems(selectedAlphabet, selectedNumber){
    for (var i=1; i<=4; i++) {
        $('<iframe />', {
            src: '/item?alphabet=' + selectedAlphabet + '&numberCategory=' + selectedNumber + '&shelfNumber=' + i
        }).appendTo('.iframe-content-'+i);
    }
}