jQuery-Selektor verhält sich im geparsten HTML von ajax nicht wie erwartet

Ich bin heute auf ein seltsames Problem gestoßen, ich hoffe, dass jemand anderes mir helfen kann, dies herauszufinden.jQuery-Selektor verhält sich im geparsten HTML von ajax nicht wie erwartet

Das Projekt, an dem ich arbeite, ist mehr oder weniger eine jQuery-Diashow. Ich habe eine super einfach Datei, die ich bin Laden alles, um zu testen, sieht es so etwas wie diese:

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

Wieder nichts auch nur entfernt Phantasie hier.

nun in jQuery Ich erhalte und die Seite wie das Parsen:

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

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

ABER! $ Dias ein leeres Array zurück, wenn ich es in einem bedeutungslosen div wickeln, wie:

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

und jetzt:

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

ich über die jQuery docs auf dieser (http gelesen haben: // api.jquery.com/jQuery/) und andere StackOverflow-Konversationen, aber keiner von ihnen erklärt, warum ich ein Wrapper-Div benötigen würde, damit Ergebnisse zurückgegeben werden.

Irgendwelche Ideen? Ich weiß, dass es kein großes Problem ist, aber ich möchte nicht eine Reparatur hacken müssen, wenn ich die Wurzel des Problems finden könnte.

...

TL; DR: jQuery wählen Sie im Rahmen funktioniert nur mit einem seltsamen Wrapper div

Quelle

2012-08-01 Zach Wolf

+1 für Tisch-Flip –

Immediate +1 für eine redditor Spiegeln Tabellen. Willkommen Bruder :) –

Wenn Sie einen Kontext an $() übergeben, bitten Sie den Selektor, unter seinen Nachkommen nach dem gegebenen Element zu suchen (das funktioniert wie .find()). Ohne Ihr Wrapper div ist das Element, das Sie suchen, das Kontextelement, so dass Ihr Selektor es nicht finden kann, da es stattdessen in das Element hinein schaut.

sollten Sie .filter() stattdessen verwenden, welches einen Satz von Elementen filtert stattdessen ihre Nachkommen des Suchens:

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

Quelle

2012-08-01 21:38:13 BoltClock

Genau das, was ich gesucht habe! Und das macht absolut Sinn, jetzt, wo es erklärt wurde, fühlte ich mich, als wäre es etwas in dieser Richtung. –

Sie müssen Filter verwenden.

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

Die Tags html und body werden vom Browser entfernt, so dass sie ihren Inhalt behalten.

Quelle

2012-08-01 21:34:09

jQuery-Selektor verhält sich im geparsten HTML von ajax nicht wie erwartet

Antwort

Verwandte Themen