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.

Solution

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