2012-08-01 5 views
7

今日、私は奇妙な問題に遭遇しました。私は他の誰かがこれを理解するのを助けることを望んでいます。jQueryセレクタがAjaxの解析されたHTMLで期待通りに動作しない

私が取り組んでいるプロジェクトは、多かれ少なかれjQueryのスライドショーです。ここ

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

ここでも、何でも、リモートで空想:私はすべてをテストするためにロードしてる超シンプルなファイルを持って、それは次のようになります。今

、jQueryの中で私のようなページを取得して解析しています:

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

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

しかし! $スライド私は無意味なのdivでラップしない限り、同様に、空の配列を返します://:私はこの(HTTP上でjQueryのドキュメント上で読んだ

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

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

となりましたapi.jquery.com/jQuery/)と他のStackOverflowの会話がありますが、なぜ結果が返されるようにラッパーdivが必要なのか説明できません。

アイデア?私はそれが大きな問題ではないことを知っていますが、私は問題の根本を見つけることができるときに修正をハックする必要はありません。

...

TL; DR:jQueryの選択範囲内でのみ、あなたは、フィルタを使用する必要がある奇妙なラッパーのdiv

+1

1テーブルフリップ –

+0

のための即時+1をテーブルをひっくり返すredditorため。歓迎兄弟:) –

答えて

3

$()にコンテキストを渡すと、セレクタに指定された要素の子孫を探すように要求しています(これは.find()のように機能します)。あなたのラッパーdivがなければ、あなたが探している要素はコンテキスト要素なので、セレクタはその内部を見ているのでセレクタはそれを見つけることができません。

あなたは自分の子孫を検索するのではなく、要素の集合をフィルタリングされ、代わりに.filter()を使用する必要があります。

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

まさに私が探していたもの! それが説明されたので、それは完璧な意味を持つようになりました。 –

2

で動作します。

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

htmlタグとbodyタグは、ブラウザがコンテンツを残して取り除かれます。

関連する問題