Javascript jQuery选择器在从ajax解析的HTML中的行为与预期不符
我今天遇到了一个奇怪的问题,我希望其他人能帮我解决这个问题 我正在做的项目或多或少是一个jQuery幻灯片。我有一个超级简单的文件,我正在加载它来测试一切,它看起来像这样:Javascript jQuery选择器在从ajax解析的HTML中的行为与预期不符,javascript,jquery,html,jquery-plugins,jquery-selectors,Javascript,Jquery,Html,Jquery Plugins,Jquery Selectors,我今天遇到了一个奇怪的问题,我希望其他人能帮我解决这个问题 我正在做的项目或多或少是一个jQuery幻灯片。我有一个超级简单的文件,我正在加载它来测试一切,它看起来像这样: <!doctype html public "(╯°□°)╯︵ ┻━┻"> <html> <head> <meta charset="utf-8"> <title>test</title&
<!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>
但是$幻灯片返回一个空数组,除非我将其包装为一个无意义的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>
测试组1
测试组2
测试组3
现在:
console.log($slides); // returns [<div id="slides" data-slideShow="holder">...</div>]
console.log($slides);//返回[…]
我已经阅读了关于这个问题的jQuery文档(http://api.jquery.com/jQuery/)和其他StackOverflow对话,但没有一个解释为什么我需要一个包装器div来返回结果
有什么想法吗?我知道这不是一个大问题,但我不想在找到问题的根源时不得不修改
TL;DR:jQuery的select-in-scope只适用于奇怪的包装div,您需要使用filter
$(data.responseText).filter('[data-slidesShow="holder"]')
html和body标记被浏览器剥离,留下它们的内容。当您将上下文传递给
$()
时,您要求选择器在其子代中查找给定元素(其工作方式类似于.find()
)。如果没有包装器div
,您要查找的元素就是上下文元素,因此您的选择器将无法找到它,因为它正在里面查找
您应该改用.filter()
,它过滤一组元素,而不是搜索它们的后代:
var $slides = $(data.responseText).filter('[data-slidesShow="holder"]');
redditor翻转表格时立即+1。欢迎兄弟:)正是我要找的!现在已经解释清楚了,这是很有道理的,我觉得应该是这样的。
var $slides = $(data.responseText).filter('[data-slidesShow="holder"]');