Question

在我的主html文件中，我正在尝试使用id="contentToLoad"加载其他一些html文件。所有加载的html将附加到我的main.html文件中的id="allWrapper"。

$(function () {
  for(i = 1; i <= 4; i++) {
    $('#allWrapper').load('htmlFile' + i + '.html #contentToLoad', function () {
      $(this).appendTo('#allWrapper')
      //alert('Load was performed.');
    });
  }
});

我遇到的一个问题是每个新添加的html内容都会被前一个覆盖。如何在不覆盖每个html文件的情况下显示所有这些文件？

Answer 1

这就是加载的工作方式，请尝试使用$ .get。

for (i=1;i<=4;i++)
{
    $.get('htmlFile' + i + '.html', function(data) {
        $(data).find('#contentToLoad').appendTo('#allWrapper') 
        //alert('Load was performed.');
    });
}

Answer 2

load方法的要点是将GET请求中的HTML插入到您选择的DOM元素中。

您想要使用的是get方法，尤其是在jQuery文档的第一个示例中如何使用它：

$.get('ajax/test.html', function(data) {
  $('#allWrapper').append($(data).find('#contentToLoad'));
});

Answer 3

尝试将其存储到变量并将该变量附加到您想要的任何容器

var mycode = $('<div></div>');

mycode.load('htmlFile' + i + '.html #contentToLoad', function() {
    var x = mycode.html();
    $('#allWrapper').append(x);
});

试试。

Answer 4

找到解决方案，这里是代码：

<script type="text/javascript">

$(function(){

for (i=1;i<=4;i++)
{

    $.get('htmlFile' + i + '.html #contentToLoad', function(data){
      $(data).appendTo('#allWrapper') 
    });

}

});

</script>

防止.load（）覆盖我的HTML？

4 个答案: