首頁猿問如何從源HTML頁面加載子HTML...

如何從源HTML頁面加載子HTML頁面內容，而不使用jQuery滾動到頁面底部？

JavaScript

慕沐林林 2022-09-29 17:53:14

我正在使用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>

查看完整描述

1 回答

人到中年有點甜

TA貢獻1895條經驗獲得超7個贊

如果我理解正確，您希望一次從文件中加載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", 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));

}

});

反對回復 2022-09-29

1 回答
0 關注
119 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何從源HTML頁面加載子HTML頁面內容，而不使用jQuery滾動到頁面底部？

如何從源HTML頁面加載子HTML頁面內容，而不使用jQuery滾動到頁面底部？

1 回答

添加回答

如何從源HTML頁面加載子HTML頁面內容，而不使用jQuery滾動到頁面底部？

如何從源HTML頁面加載子HTML頁面內容，而不使用jQuery滾動到頁面底部？