如何从源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我们想要创建一个流程/状态图来了解需要什么。初始负载使用子元素中的前 50 个项目填充元素.htmlparent用户阅读内容，向下滚动页面用户达到文档高度的 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",&nbsp;function(ht){ &nbsp;&nbsp;$("#parent").append($(ht).find(".row").slice(0,50)); });这将工作但不是最佳的，因为GET请求每次都会返回整个文档。如果是这种情况，最好先加载整个文档，然后在用户向下滚动时显示更多项目。这违背了目的。如果你想试试，这里有一个例子：$(function() {&nbsp; var count = 0;&nbsp; function getNextSet(url, n) {&nbsp; &nbsp; var ht;&nbsp; &nbsp; $.get(url, function(data) {&nbsp; &nbsp; &nbsp; var start = count;&nbsp; &nbsp; &nbsp; count = count + n;&nbsp; &nbsp; &nbsp; ht = $(data).find(".row").slice(start, count);&nbsp; &nbsp; });&nbsp; &nbsp; return ht;&nbsp; }&nbsp; $("#parent").append(getNextSet("child.html", 50));&nbsp; $(document).scroll(function() {&nbsp; &nbsp; if ($(window).scrollTop() >= ($(this).height() - $(window).height()) * 0.7) {&nbsp; &nbsp; &nbsp; $("#parent").append(getNextSet("child.html", 50));&nbsp; &nbsp; }&nbsp; });});