jQuery 选择器在从 ajax 解析的 HTML 中的行为不符合预期
Posted
技术标签:
【中文标题】jQuery 选择器在从 ajax 解析的 HTML 中的行为不符合预期【英文标题】:jQuery selector not behaving as expected in parsed HTML from ajax 【发布时间】:2012-07-30 20:35:50 【问题描述】:我今天遇到了一个奇怪的问题,我希望其他人可以帮助我解决这个问题。
我正在进行的项目或多或少是一个 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/) 和其他 *** 对话的 jQuery 文档,但没有一个解释为什么我需要一个包装器 div 来返回结果。
有什么想法吗?我知道这不是一个大问题,但是当我找到问题的根源时,我不想破解修复程序。
...
TL;DR:jQuery 在范围内的选择仅适用于奇怪的包装器 div
【问题讨论】:
立即为 redditor 翻转表 +1。欢迎兄弟:) 【参考方案1】:当您将上下文传递给$()
时,您要求选择器在其后代中查找给定元素(这类似于.find()
)。如果没有您的包装器div
,您要查找的元素就是上下文元素,因此您的选择器将无法找到它,因为它正在查看它的内部。
您应该改用.filter()
,它过滤一组元素而不是搜索它们的后代:
var $slides = $(data.responseText).filter('[data-slidesShow="holder"]');
【讨论】:
正是我想要的!既然已经解释过了,这完全有道理,我觉得它会是这样的。【参考方案2】:你需要使用过滤器。
$(data.responseText).filter('[data-slidesShow="holder"]')
html 和 body 标签被浏览器剥离,留下它们的内容。
【讨论】:
以上是关于jQuery 选择器在从 ajax 解析的 HTML 中的行为不符合预期的主要内容,如果未能解决你的问题,请参考以下文章
JQuery 选择器在 ASP.NET 网络表单中的错误控件中激活
:禁用选择器在Jquery Validate忽略子句中不起作用[重复]
在 BigQuery 中加载 JSON / JSON 在从位置开始的行中解析错误 ...:解析器在字符串结束之前终止