jQuery selector non si comporta come previsto in HTML parsed da ajax

Oggi ho avuto un problema strano, spero che qualcun altro possa aiutarmi a capirlo.jQuery selector non si comporta come previsto in HTML parsed da ajax

Il progetto a cui sto lavorando è più o meno una presentazione jQuery. Ho un file super semplice che sto caricando di testare tutto fuori, sembra qualcosa di simile:

<!doctype html public "(╯°□°）╯︵ ┻━┻"> 
    <html> 
     <head> 
      <meta charset="utf-8"> 
      <title>test</title> 
     </head> 
     <body> 
      <div id="slides" data-slidesShow="holder"> 
       <div class="slide" id="test1">test div 1</div> 
       <div class="slide" id="test2">test div 2</div> 
       <div class="slide" id="test3">test div 3</div> 
      </div> 

      <button id="previous">previous</button> 
      <button id="next">next</button> 

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script> 

      <script type="text/javascript" src="js/slides.js"></script> 

      <?php include 'footer.php'; ?> 
     </body> 
    </html>

Anche in questo caso, niente di neanche lontanamente di speciale qui.

Ora, in jQuery sto ottenendo e analizzare la pagina come:

$.ajax({ 
    url:  target.path, 
    dataType: "html", 
    complete: function(data){ 
     var $slides  = $('[data-slidesShow="holder"]', $(data.responseText)); 

     console.log($slides); // returns [] 
    } 
});

MA! $ diapositive restituisce un array vuoto, a meno che non avvolgerlo in un div senza senso, come:

<div class="stupid-wraper-div-that-i-dont-want-or-need"> 
    <div id="slides" data-slidesShow="holder"> 
     <div class="slide" id="test1">test div 1</div> 
     <div class="slide" id="test2">test div 2</div> 
     <div class="slide" id="test3">test div 3</div> 
    </div> 
</div>

e ora:

console.log($slides); // returns [<div id="slides" data-slideShow="holder">...</div>]

ho letto sopra la documentazione jQuery su questo (http: // api.jquery.com/jQuery/) e altre conversazioni StackOverflow, ma nessuno di loro spiega perché avrei bisogno di un div wrapper per ottenere risultati restituiti.

Qualche idea? So che non è un grosso problema, ma non voglio dover modificare una correzione quando ho trovato la radice del problema.

...

TL; DR: jQuery di selezionare nel campo di applicazione funziona solo con uno strano involucro div

fonte

2012-08-01 Zach Wolf

+1 per la tavola della medaglia –

immediata +1 per una redditor flipping tabelle. Fratello benvenuto :) –

Quando si passa un contesto a $(), si chiede al selettore di cercare tra i suoi discendenti per l'elemento specificato (funziona come .find()). Senza il tuo wrapper div, l'elemento che stai cercando è l'elemento di contesto, quindi il tuo selettore non sarà in grado di trovarlo dal suo interno.

Si dovrebbe usare .filter() invece, che filtra un insieme di elementi, invece di cercare i loro discendenti:

var $slides = $(data.responseText).filter('[data-slidesShow="holder"]');

fonte

2012-08-01 21:38:13 BoltClock

Esattamente quello che stavo cercando! E questo ha perfettamente senso ora che è stato spiegato, mi sembrava che sarebbe stato qualcosa di simile. –

È necessario utilizzare il filtro.

$(data.responseText).filter('[data-slidesShow="holder"]')

I tag html e body vengono rimossi dal browser lasciando il loro contenuto.

fonte

2012-08-01 21:34:09

jQuery selector non si comporta come previsto in HTML parsed da ajax

risposta

Problemi correlati