Posso aggiungere jQuery .load al posto di sostituire?

Question

Ho installato WordPress e sto provando ad usare jQuery per creare un effetto Load More. Sto riscontrando dei problemi nell'utilizzo della funzione di caricamento di base per i frammenti di pagina. Non mi dispiace usare. Come ho visto alcuni thread qui a riguardo come una soluzione migliore.

Ecco la mia struttura della pagina URL e il contenuto:

Prima Pagina: http://example.com/page/1/

Il codice 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> 

seconda pagina: http://example.com/page/2/

Il codice 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> 

Ho un link in fondo alla pagina e ho provato a fare il seguente:

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

Purtroppo, ci sono 2 problemi. Innanzitutto, la funzione .load cattura lo #articles div e il suo contenuto dalla seconda pagina e lo inserisce nell'attuale #articles div. Ciò significa che, anche se ciò dovesse funzionare, ci sarebbero delle immersioni ricorsive all'interno dei div risultanti da ciascun clic. È solo disordinato.

Qualcuno potrebbe aiutarmi con il comando di aggiungere semplicemente .story classes dalla seconda pagina a #articles div nella prima pagina? Posso capire la logistica di automatizzarlo con variabili, loop e PHP per WordPress dopo. Ho solo bisogno di qualche assenso con lo script jQuery corretto.

P.S. Domanda bonus: se qualcuno sa se jQuery .load/.get danneggerà le pagine visualizzate, che è importante per chi ha entrate basate sulla pubblicità, per favore fatemelo sapere! Se ogni .load/.get conta come un altro successo per Google Analytics, siamo a posto!

Grazie!

Answer 1

Non è possibile accodare il contenuto utilizzando il metodo jQuery.load(), ma si può fare ciò che si desidera utilizzare jQuery.get():

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

Answer 2

probabilmente sarei fare in questo modo.

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

#articles > * recupera tutti i bambini immediate per #article.

Answer 3

Per l'aggiunta di dati, non penso che si desideri utilizzare $ .load(). Invece, potresti voler usare $ .ajax().

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

Answer 4

Prova questo ha funzionato per me.

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