jQuery選擇器的行爲不像預期的那樣從ajax解析的HTML

今天我遇到了一個奇怪的問題，我希望別人能幫我弄清楚這一點。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 [] 
    } 
});

BUT！ $幻燈片返回一個空數組，除非我把它包在一個毫無意義的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>

現在：

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

我對這個（HTTP讀了jQuery的文檔：// api.jquery.com/jQuery/）和其他StackOverflow對話，但他們都沒有解釋爲什麼我需要一個包裝div來返回結果。

任何想法？我知道這不是一個大問題，但我不想在找到問題的根源時不得不修補問題。

...

TL; DR：jQuery的選擇範圍只能用怪異的包裝DIV

來源

2012-08-01 Zach Wolf

+1臺翻蓋 – 2012-08-01 21:31:33

立即+1一位Reddit翻轉表。歡迎兄弟:) – 2012-08-01 21:31:44

當您將上下文傳遞給$()時，您要求選擇器在給定元素的後代之間進行查找（此操作類似於.find()）。如果沒有你的包裝div，你正在尋找的元素是上下文元素，所以你的選擇器將無法找到它，因爲它正在尋找它。

您應該使用.filter()來代替，該過濾器一組元素，而不是搜索他們的後代：

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

來源

2012-08-01 21:38:13 BoltClock

正是我在找什麼！而且現在已經解釋了這一點非常有意義，我覺得這將是沿着這些路線的東西。 – 2012-08-01 22:08:01

您需要使用過濾器的工作原理。

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

html和body標籤被瀏覽器留下的內容剝離。

來源

2012-08-01 21:34:09

jQuery選擇器的行爲不像預期的那樣從ajax解析的HTML

回答

相關問題