可以jQuery .load追加而不是替換？

我有一個WordPress安裝，我試圖用jQuery來創建一個加載更多的效果。我在使用頁面片段的基本.load功能時遇到了一些麻煩。我不介意使用.get，因爲我在這裏看到一些線索，將其作爲更好的解決方案。可以jQuery .load追加而不是替換？

這裏是我的網頁URL的結構和內容：

第一頁：http://example.com/page/1/

的HTML：

<div id="articles"> 
    <div class="story">blah blah blah</div> 
    <div class="story">blah blah blah</div> 
    <div class="story">blah blah blah</div> 
    <div class="story">blah blah blah</div> 
</div>

第二頁：http://example.com/page/2/

的HTML：

<div id="articles"> 
    <div class="story">blah blah blah</div> 
    <div class="story">blah blah blah</div> 
    <div class="story">blah blah blah</div> 
    <div class="story">blah blah blah</div> 
</div>

我必須在頁面底部的鏈接，我試着做以下幾點：

jQuery(#articles).load('http://example.com/page/2/ #articles');

可悲的是，有2個問題。首先，.load函數從第二頁抓取#articles div及其內容，並將其放入現有的#articles div。這意味着，即使這樣做，每次點擊都會產生div內的遞歸div。這只是一團糟。

有人可以幫助我使用命令簡單地將第二頁上的.story classes附加到第一頁上的#articles div上嗎？我可以弄清楚在變量，循環和PHP之後使用WordPress進行自動化的物流。只需要一些合適的jQuery腳本。

P.S.獎金問題：如果有人知道jQuery .load/.get是否會損害綜合瀏覽量，這對於那些有廣告收入的人來說很重要，請讓我知道！如果每個.load/.get都算作Google Analytics的另一個熱門產品，那我們就很棒！

謝謝！

來源

2010-10-22 Sahas Katta

我不認爲$ .load（）會影響谷歌分析。爲了讓Google註冊一個綜合瀏覽量，實際的頁面需要以這樣一種方式加載，即Google分析的JavaScript被執行。當一個頁面被加載到瀏覽器窗口中時，google JavaScript會被執行，而不是像在$ .load（）中那樣檢索文件內容時。 – quakkels 2010-10-22 18:35:35

不能使用jQuery.load()方法追加內容，但你可以做你想做使用的是什麼jQuery.get()：

$.get('/page/2/', function(data){ 
    $(data).find("#articles .story").appendTo("#articles"); 
});

來源

2010-10-22 18:36:41 gabriel

Gabriel，謝謝！你的代碼非常容易理解，並且很好用。我正在使用您的代碼以及Znarkus的進口容器跳到正確位置的概念。試圖弄清楚如何暫時重寫鏈接，任何幫助都會很棒。這個問題在上面的Znarkus的評論中被描述。 – 2010-10-22 20:03:39

如果你想過濾加載的內容get（）不會做這項工作。 $ .load（'/ page/2/.posts'）;例如 – keinabel 2012-07-30 00:17:55

我剛剛有一個類似的問題，這似乎是工作，但給我一個空的對象，當我將其登錄到控制檯進行調試。頁面上也沒有任何東西出現。 :( – maxxon15 2012-09-02 13:14:24

我可能會不喜歡這樣。

$('#articles').append($('<div/>', { id: '#articles-page2' }); 
$('#articles-page2').load('http://example.com/page/2/ #articles > *');

#articles > *獲取所有直接孩子#article。

來源

2010-10-22 18:37:37 Znarkus

嘿Znarkus，你能澄清一些代碼嗎？我需要讓PHP生成名爲'＃articles-page2'，＃＃articles-page3'等的DIV嗎？ – 2010-10-22 19:20:13

是的，這也會使它更容易分離頁面，對正確處理歷史記錄很有用（用戶在瀏覽器中按下後退按鈕），然後你可以加載頁面'http：// example.com/page＃articles-page3'，瀏覽器向下滾動到那個結果集 – Znarkus 2010-10-22 19:34:02

我把它和你的想法和來自Gabriel的代碼一起工作了！還有一個問題稍微有點相關，但我有'Load More'我使用.attr來讀取鏈接的值來獲取下一頁對於'.load'，我仍然希望它是一個鏈接，以防JS禁用/不工作/ SEO。但是我怎麼能讓jQuery重寫它來滾動到'＃articles-page2'內部生成的DIV實例？再次感謝！ – 2010-10-22 20:01:33

對於追加數據，我不認爲你會想要使用$ .load（）。相反，你可能想使用$ .ajax（）進行研究。

$.ajax({ 
    url: 'yourlocation/test.html', 
    success: function(data) { 
    $('.result').html(data); 
    $("#yourdiv").append(data); 
    } 
});

來源

2010-10-22 18:38:59 quakkels

試試這個對我有用。

$('#articles').append($('<div/>').load('http://example.com/page/2/ #articles'));

來源

2015-10-07 18:05:05 user2962835

可以jQuery .load追加而不是替換？

回答

相關問題