Zac*_*olf 7 html javascript jquery jquery-plugins jquery-selectors
我今天遇到了一个奇怪的问题,我希望别人可以帮我解决这个问题.
我正在进行的项目或多或少是一个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 []
}
});
但!$ slides返回一个空数组,除非我将它包装在一个无意义的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://api.jquery.com/jQuery/)和其他StackOverflow对话的jQuery文档,但没有一个解释为什么我需要一个包装器div来返回结果.
有任何想法吗？我知道这不是一个大问题,但是当我找到问题的根源时,我不想破解修复.
...
TL; DR:jQuery的范围选择仅适用于奇怪的包装div
当您将上下文传递给 时$()，您要求选择器在其后代中查找给定元素（这与.find()）类似。如果没有包装器div，您要查找的元素就是上下文元素，因此您的选择器将无法找到它，因为它正在查找它的内部。
您应该使用.filter()它来过滤一组元素，而不是搜索它们的后代：
var $slides = $(data.responseText).filter('[data-slidesShow="holder"]');