¿Puede jQuery. Cargar agregar en lugar de reemplazar?

Question

Tengo una instalación de WordPress y estoy tratando de usar jQuery para crear un efecto Cargar más. Tengo problemas para usar la función .load básica para los fragmentos de página. No me importa usar .get ya que vi algunos hilos aquí con respecto a eso como una mejor solución.

Aquí es mi estructura de la página URL y el contenido:

primera página: http://example.com/page/1/

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

segunda página: http://example.com/page/2/

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

que tienen un enlace en la parte inferior de la página y he intentado hacer lo siguiente:

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

Lamentablemente, hay 2 números. Primero, la función .load toma el #articles div y su contenido de la segunda página y lo coloca en el #articles div existente. Eso significa que, incluso si esto funcionara, habría divs recursivos dentro de los divs resultantes de cada clic. Es simplemente desordenado.

¿Podría alguien ayudarme con el comando simplemente anexar el .story classes de la segunda página en el #articles div en la primera página? Puedo descubrir la logística de automatizarlo con variables, bucles y PHP para WordPress después. Solo necesito ayuda con la secuencia de comandos jQuery adecuada.

P.S. Cuestión de bonificación: si alguien sabe si jQuery .load/.get dañará las páginas vistas, lo que es importante para aquellos con ingresos publicitarios, ¡por favor hágamelo saber! Si cada .load/.get cuenta como otro hit para Google Analytics, ¡estamos bien!

Gracias!

Answer 1

, no podrá añadir contenido mediante el método jQuery.load(), pero se puede hacer lo que desee con jQuery.get():

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

Answer 2

probablemente lo haría así.

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

#articles > * Obtiene todos los niños inmediatas para #article.

Answer 3

Para anexar datos, no creo que desee usar $ .load(). En su lugar, es posible que desee considerar el uso de $ .ajax().

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

Answer 4

Prueba esto funcionó para mí.

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