Kann jQuery .load anhängen statt ersetzen?

Question

Ich habe eine WordPress-Installation und ich versuche mit jQuery einen Load More-Effekt zu erstellen. Ich habe Probleme mit der grundlegenden .load-Funktion für Seitenfragmente. Es macht mir nichts aus, .get zu verwenden, da ich hier einige Threads als bessere Lösung gesehen habe.

Hier ist meine Seite URL-Struktur und der Inhalt:

Erste Seite: http://example.com/page/1/

Die 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> 

Zweite Seite: http://example.com/page/2/

Die 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> 

Ich habe einen Link am Ende der Seite und ich habe folgendes versucht zu tun:

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

Leider gibt es zwei Probleme. Zuerst nimmt die .load-Funktion die #articles div und ihren Inhalt von der zweiten Seite und legt sie in den vorhandenen #articles div. Das heißt, selbst wenn dies funktionieren würde, würde es rekursive divs in divs geben, die sich aus jedem Klick ergeben. Es ist nur unordentlich.

Könnte mir jemand mit dem Befehl helfen, einfach die .story classes von der zweiten Seite in die #articles div auf der ersten Seite anzuhängen? Ich kann die Logistik der Automatisierung mit Variablen, Schleifen und PHP für WordPress danach herausfinden. Brauchen Sie einfach Unterstützung mit dem richtigen jQuery-Skript.

P.S. Bonusfrage: Wenn jemand weiß, ob jQuery .load/.get Seitenzugriffe schädigt, was für diejenigen mit werbebasiertem Umsatz wichtig ist, lass es mich wissen! Wenn jeder .load/.get als weiterer Hit für Google Analytics zählt, sind wir gut!

Danke!

Answer 1

Sie können nicht anhängen Inhalt der jQuery.load() Methode verwendet, aber Sie können tun, was Sie wollen jQuery.get() mit:

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

Answer 2

ich wahrscheinlich das es wie tun würde.

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

#articles > * holt alle unmittelbaren Kinder #article.

Answer 3

Zum Anhängen von Daten, glaube ich nicht, dass Sie $ .load() verwenden möchten. Stattdessen sollten Sie sich mit $ .ajax() befassen.

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

Answer 4

Versuchen Sie es, es funktionierte für mich.

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