可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答1:

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

回答2:

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

回答3:

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

回答4:

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