javascript - 防止 .load() 覆盖我的 html？

Question

在我的主 html 文件中，我试图用id="contentToLoad". 所有加载的 html 都将附加到id="allWrapper"我的 main.html 文件中。

$(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

找到了解决办法，代码如下：

<script type="text/javascript">

$(function(){

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

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

}

});

</script>

Answer 2

这就是负载的工作原理，请尝试使用 $.get 代替。

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

Answer 3

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

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

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

Answer 4

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

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

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

试试看。