Peut jQuery .load ajouter au lieu de remplacer?

Question

J'ai une installation WordPress et j'essaie d'utiliser jQuery pour créer un effet Load More. J'ai des problèmes pour utiliser la fonctionnalité .load de base pour les fragments de page. Cela ne me dérange pas d'utiliser .get comme je l'ai vu des discussions ici en ce qui concerne cela comme une meilleure solution.

Voilà ma structure d'URL de la page et le contenu:

Première page: http://example.com/page/1/

Le code 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> 

Deuxième Page: http://example.com/page/2/

Le code 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> 

J'ai un lien en bas de la page et je l'ai essayé de faire ce qui suit:

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

Malheureusement, il y a 2 problèmes. D'abord, la fonction .load saisit le #articles div et son contenu à partir de la deuxième page et le place dans le #articles div existant. Cela signifie que même si cela fonctionnait, il y aurait des divs récursifs dans les divs résultant de chaque clic. C'est juste en désordre.

Est-ce que quelqu'un pourrait m'aider avec la commande pour ajouter simplement le .story classes de la deuxième page dans le #articles div sur la première page? Je peux comprendre la logistique de l'automatisation avec des variables, des boucles, et PHP pour WordPress après. Juste besoin d'aide avec le script jQuery approprié.

P.S. Question bonus: Si quelqu'un sait si jQuery .load/.get nuira aux pages vues, ce qui est important pour ceux qui ont des revenus basés sur la publicité, s'il vous plaît faites le moi savoir! Si chaque .load/.get est un autre succès pour Google Analytics, nous sommes bons!

Merci!

Answer 1

Vous ne pouvez pas ajouter du contenu en utilisant la méthode jQuery.load(), mais vous pouvez faire ce que vous voulez en utilisant jQuery.get():

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

Answer 2

Je ferais probablement comme ça.

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

#articles > * récupère tous les enfants immédiats à #article.

Answer 3

Pour l'ajout de données, je ne pense pas que vous souhaitiez utiliser $ .load(). Au lieu de cela, vous pourriez vouloir utiliser $ .ajax().

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

Answer 4

Essayez ceci cela a fonctionné pour moi.

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