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

Question

我正在使用 jQuery 加载子 HTML 页面。子 HTML 页面有一个 div 列表，并且数字最多可以变化 50 个 div。我正在使用 Jquery.get 在父级中加载子 HTML。我需要在不滚动到页面底部的情况下查看包含所有 div 的子项的内容。我尝试使用下面的代码，但是在显示所有 div 之后，来自孩子的 div 不断重复。我怎样才能做到这一点？

Parent.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>

Child.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

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

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

1. 初始加载

• 使用 child.html 中的前 50 个项目填充 parent 元素

1. 用户阅读内容，向下滚动页面
2. 用户达到文档高度的 70%

• 请求接下来的 50 个元素
• 将下一个结果集附加到parent

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

据我目前了解，child.html 是静态的，包含 N 个元素。 JavaScript/jQuery 无法加载特定数量的项目。每次都会加载整个文档。使用.load()，我们可以过滤特定的选择器。

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

我认为我们可以使用:lt()，就像这样：

$("#parent").load("child.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));
    }
  });
});