jquery ajax $.get result doesn't find class

I got stuck on a seemingly simple problem.

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);
        });
    });
});

The console returns this:

undefined
false

Now the .js-wrapper element is not in the header but on a div that is inside the body.

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>

(I included the historyJS call just in case it could have something to do with it)

Help is, as always, appreciated.

标签： javascript jquery ajax history.js

4条回答

Emotional °昔

2楼-- · 2019-09-10 06:56

I would first echo out the response and make sure your getting the correct html back.

Then you can confirm you have the html with the specific class.

The .hasClass is exactly what you want, the undefined is probably because you're not getting the html back, to confirm console log it.

use $('Your Div').contents();

To get the html content

Then $('Where you want to place html Div').append(Your Div);

0人赞添加讨论(0) 举报

Juvenile、少年°

3楼-- · 2019-09-10 07:05

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);
        });
    });
});

So I had to append the response to an empty div first.

Thanks

0人赞添加讨论(0) 举报

可以哭但决不认输i

4楼-- · 2019-09-10 07:10

It looks like, you are trying to get a property which should not exist i.e

$url.url

You $.get code block should look like this

   $.get($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);
        });

0人赞添加讨论(0) 举报

小情绪 Triste *

5楼-- · 2019-09-10 07:12

Seems to work in the

{ http://jsfiddle.net/Px6tu/ }

Please try to console log the response to make sure you are getting what is expected.

Also have a look Ajax Response Finding HTML Fragments Using Find

0人赞添加讨论(0) 举报

jquery ajax $.get result doesn't find class

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间