jQuery ajax $ .get结果找不到类 [英] jquery ajax $.get result doesn't find class
问题描述
我陷入了一个看似简单的问题.
I got stuck on a seemingly simple problem.
我想从ajax请求中获取生成的HTML，并查看特定元素是否具有特定类，并获取响应中另一个元素的HTML并使用它替换某些内容，等等...
I want to fetch the resulting HTML from a ajax request and look whether or not a specific element has a specific class and take the HTML of another element of the response and use it to replace something etc...
$(function() {
$('.js-nav').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $url = $this.attr('href');
$.get($url.url, function(response) {
var $response = $(response);
var $body = $response.find('.js-wrapper').html();
var _isLight = $response.find('.js-wrapper').hasClass('body-light');
console.log($body);
console.log(_isLight);
History.pushState({ state:$url }, $title, $url);
});
});
});
控制台返回以下内容:
undefined
false
现在，.js-wrapper元素不在标题中，而是在主体内部的div中.
Now the .js-wrapper element is not in the header but on a div that is inside the body.
响应HTML (使用$ .get检索后，控制台退出.)如下所示:
The response HTML (console.logged out after it was retrieved with $.get) looks as follows:
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>
some title ...
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- some header stuff like css files and scripts(the ones that HAVE to be in the header) -->
</head>
<body>
<div class="js-wrapper wrapper body-light">
<header class="js-header header">
<!-- some content divs and whatnot -->
<nav class="header-nav">
<ul class="js-header-nav-list header-nav-list">
<li class="header-nav-item">
<!-- a couple nav li -->
</li>
</ul>
</nav>
</header>
<div class="content">
<!-- Content -->
</div>
<footer class="footer">
<section class="footer-newsletter">
<!-- footer sections... -->
</section>
</footer>
</div>
<!-- Some scripts -->
</body>
</html>
(我包括了historyJS调用，以防可能与之相关)
一如既往地感谢您的帮助.
Help is, as always, appreciated.
推荐答案
感谢@Girish Sakhare的评论和@Alexanders的回答
Thanks to @Girish Sakhare comment and @Alexanders answer here I got the solution:
var $response = $("<div/>").html(response);
所以函数现在看起来像这样:
So the function looks like this now:
$(function() {
$('.js-nav').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $url = $this.attr('href');
$.get($url, function(response) {
var $response = $("<div/>").html(response);
var $body = $response.find('.js-wrapper').html();
var _isLight = $response.find('.js-wrapper').hasClass('body-light');
console.log($body);
console.log(_isLight);
History.pushState({ state:$url }, $title, $url);
});
});
});
所以我必须先将响应附加到一个空的div.
So I had to append the response to an empty div first.
谢谢
这篇关于jQuery ajax $ .get结果找不到类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
