如何从源HTML页面加载子HTML页面内容，而不使用jQuery滚动到页面底部？

Question

我正在使用j查询加载一个子HTML页面。子 HTML 页面具有 div 的列表，数字最多可以变化 50 个 div。我正在使用Jquery.get在父级中加载子HTML。我要求查看包含所有div的子级内容，而无需滚动到页面底部。我试图使用以下代码，但是在显示所有div后，来自孩子的div不断重复。我怎样才能做到这一点？家长.html<div id="parent"></div><script>    $.get('child.html', function(data){ // Loads content into the 'data' variable.        $('#parent').append(data); // Injects 'data' after the #div element.    });    $(document).scroll(function(e){        if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){            $.get('child.html', function(data){ // Loads content into the 'data' variable.                $('#parent').append(data); // Injects 'data' after the #div element.            });        }    });</script>儿童.html<div class='row list' id=1>    <span>1</span></div><div class='row list' id=2>    <span>2</span></div><div class='row list' id=3>    <span>3</span></div><div class='row list' id=4>    <span>4</span></div><div class='row list' id=5>    <span>5</span></div>

Answer 1

如果我理解正确，您希望一次从文件中加载50个DIV元素。为此，我们需要跟踪已加载的项目数，然后在加载/附加到文档之前过滤HTML。child.html

我们想要创建一个流程/状态图来了解需要什么。

1. 初始负载

• 使用子元素中的前 50 个项目填充元素.htmlparent

1. 用户阅读内容，向下滚动页面

2. 用户达到文档高度的 70%

• 请求接下来的 50 个元素

• 将下一个结果集追加到parent

注意：最好使用服务器端脚本，如PHP，它可以以块的形式提供数据。

据我所知，它是静态的，包含N个元素。脚本/j查询无法加载特定数量的项。每次都会加载整个文档。使用 ，我们可以筛选特定的选择器。child.html.load()

与 不同的是，该方法允许我们指定要插入的远程文档的一部分。这是通过 URL 参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定字符串中第一个空格后面的部分是确定要加载的内容的 jQuery 选择器。.load()$.get()

我认为我们可以使用 ，如下所示：:lt()

$（“#parent”）.load（“子.html .row：lt（50）”）;

这已被弃用：

从 jQuery 3.4 开始，伪类已被弃用。将其从选择器中删除，稍后使用 筛选结果。例如，可以替换为对 的调用。:lt.slice():lt(3).slice( 0, 3 )

这样做，然后我们会恢复到这样。$.get()

$.get("child.html", function(ht){
  $("#parent").append($(ht).find(".row").slice(0,50));
});

这将工作但不是最佳的，因为GET请求每次都会返回整个文档。如果是这种情况，最好先加载整个文档，然后在用户向下滚动时显示更多项目。这违背了目的。

如果你想试试，这里有一个例子：

$(function() {

  var count = 0;

  function getNextSet(url, n) {

    var ht;

    $.get(url, function(data) {

      var start = count;

      count = count + n;

      ht = $(data).find(".row").slice(start, count);

    });

    return ht;

  }

  $("#parent").append(getNextSet("child.html", 50));

  $(document).scroll(function() {

    if ($(window).scrollTop() >= ($(this).height() - $(window).height()) * 0.7) {

      $("#parent").append(getNextSet("child.html", 50));

    }

  });

});