2010-07-08 19 views
6

come posso avere la funzionalità di load() tranne che voglio aggiungere dati invece di sostituire. forse posso usare get() posto ma voglio estrarre solo l'elemento #posts dai dati caricatijQuery use .load() per aggiungere dati invece di sostituire


UPDATE

quando faccio un alert(data) ottengo ...

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

il codice completo può essere trovato @pastebin

risposta

10

Non c'è ragione per cui non è possibile estrarre l'elemento desiderato utilizzando $.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:

Lei forse non si accorse i commenti del codice di cui sopra, così ho intenzione di renderlo più esplicito qui.

Se l'elemento #posts è al vertice della gerarchia in data, in altre parole, se non ha un elemento padre, è necessario utilizzare .filter() invece.

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

EDIT:

Sulla base dei commenti qui sotto, ti sembra di avere bisogno di .filter() invece di .find().

Il motivo è che stai passando un'intera struttura HTML. Quando lo fai, jQuery colloca i figli diretti del tag body come array nell'oggetto jQuery.

jQuery's .filter() filtri contro solo i nodi in quella matrice. Non i loro figli.

jQuery's .find() ricerche tra i discendenti dei nodi nell'array.

Per questo motivo, è necessario utilizzare entrambi. .filter() per ottenere quello corretto nella parte superiore (#posts) e .find() per ottenere il discendente corretto (.next).

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

Questo restringe il posare solo l'elemento #posts, poi trova l'elemento .next che è un discendente.

+0

Puoi onlinelinerarlo anche: '$ ('# contenitore'). Append ($ ('# posts', data));' --- Non che il tuo esempio lo faccia, ma fai attenzione a chiamare '$ (data)'/'$ ('# posts', data)' più volte in questo callback! Potrebbe trattarsi di un sacco di elaborazione/memoria non necessaria ... – gnarf

+1

@gnarf - In realtà '$ (" # posts ", data) .appendTo (" # container ");' sarebbe meno dispendioso :) –

+0

@Nick: solo costi leggibilità :) – jAndy

0

provare a utilizzare $ (questo), Qualcosa come:

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

Questo sostituirà il contenuto di 'document' con quella pagina ... non si vuole fare nulla del genere, in questo caso ha bisogno di qualcosa di diverso da' .load() '. –

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

Whoops, avrei dovuto leggere i commenti per l'altra risposta ... –

2

Per accoda con carico:

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

Questo aggiungerà tutto ciò si carica nell'elemento #Posts.

Problemi correlati