今天我遇到了一個奇怪的問題,我希望別人能幫我弄清楚這一點。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
+1臺翻蓋 – 2012-08-01 21:31:33
立即+1一位Reddit翻轉表。歡迎兄弟:) – 2012-08-01 21:31:44