2010-07-08 26 views
6

cómo puedo tener la funcionalidad de load(), excepto que quiero agregar datos en lugar de reemplazarlos. tal vez pueda utilizar en lugar get() pero quiero simplemente extraer el elemento #posts partir de los datos cargadosjQuery use .load() para anexar datos en lugar de reemplazar


ACTUALIZACIÓN

cuando hago un alert(data) me sale ...

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="jquery.infinitescroll.js"></script> 
    <script> 

    </script> 
</head> 
<body> 
    <div id="info"></div> 
    <div id="posts"> 
    <div class="post"> ... </div> 
    ... 
    <ul id="pageNav" class="clearfix"> 
    <li><a href="page1.html">1</a></li> 
    <li><a href="page2.html">2</a></li> 
    <li><a href="page3.html">3</a></li> 
    <li><a href="page4.html">4</a></li> 
    <li><a href="page5.html">5</a></li> 
    <li><a href="page3.html" class="next">next</a></li> 
    </ul> 

el código completo se puede encontrar @pastebin

Respuesta

10

No hay razón para que no se puede extraer el elemento que desee mediante $.get().

$.get('test.html',function(data) { 
    var posts = $(data).find('#posts'); 
     // If the #posts element is at the top level of the data, 
     // you'll need to use .filter() instead. 
     // var posts = $(data).filter('#posts'); 
    $('#container').append(posts); 
}); 

EDIT:

Usted tal vez no se dieron cuenta los comentarios de código anterior, así que voy a hacer que sea más explícito aquí.

Si el elemento #posts está en la cima de la jerarquía en data, en otras palabras, si no tiene un elemento padre, tendrá que utilizar .filter() lugar.

$.get('test.html',function(data) { 
    var posts = $(data).filter('#posts'); 
    $('#container').append(posts); 
}); 

EDIT:

Basándose en los comentarios de abajo, que parecen necesitar .filter() en lugar de .find().

El motivo es que está pasando una estructura HTML completa. Cuando haces eso, jQuery coloca a los hijos directos de la etiqueta body como la matriz en el objeto jQuery.

jQuery .filter() filtros solo contra los nodos de esa matriz. No sus hijos

jQuery's .find() busca entre los descendientes de los nodos en la matriz.

Debido a esto, necesita usar ambos. .filter() para obtener la correcta en la parte superior (#posts) y .find() para obtener el descendiente correcto (.next).

$(data).filter('#posts').find('.next'); 

Esto reduce el set abajo para sólo el elemento #posts, a continuación, se encuentra el elemento .next que es un descendiente.

+0

Podría incluso incluirlo en línea: '$ ('# contenedor'). Append ($ ('# posts', data));' --- No es que su ejemplo lo haga, pero tenga cuidado de llamar '$ (data)'/'$ ('# posts', data)' ¡varias veces en esta devolución de llamada! Eso podría ser una gran cantidad de procesamiento/memoria innecesaria ... – gnarf

+1

@gnarf - En realidad '$ (" # posts ", data) .appendTo (" # container ");' sería menos derrochador :) –

+0

@Nick: simplemente cuesta la legibilidad :) – jAndy

0

try use $ (this), Algo así como:

<div id="result">Hello World </div> 
    <script> 
    $(function() { 
      $(this).load('templates/test2.html', function(result) { 
       $('#result').append(result); 
      }); 
     }); 
    </script> 
+2

Esto reemplazaría el contenido de 'document' con esa página ... realmente no desea hacer algo como esto, necesita algo diferente a' .load() 'en este caso. –

1
$.get("YadaYadaYada.php", function(dat) { 
    $(dat).find("body > #posts").appendTo("#container"); 
}); 
+0

Vaya, debería haber leído los comentarios a la otra respuesta ... –

2

para anexar el uso de la carga:

jQuery('#Posts').append(jQuery('<div>').load(...)); 

Esto añadirá lo que se carga en el elemento #Posts.