在AJAX响应数据上使用jQuery

Question

I'm looking to use jQuery to determine if the current page has changed upstream, and if so, perform some action.

I want to do this by using jQuery selectors over the data returned by an AJAX call (for the purposes of this question, my "page has changed" metric will be "has the content of first <h1> changed").

Thus I find myself wanting to use jQuery selectors over the HTML returned by an AJAX get() . The "best" "solution" I've found thus far is appending the data to some hidden div, and using a selector over that, as below:

var old_title = $('h1').html();

$.get(url, function(data) {
    $('#hidden_temporary_storage').append(data);
    var new_title = $('#hidden_temporary_storage h1').html();
    if (new_title !== old_title) {
        do_something();
    }
});

This feels so very wrong - I'd be nesting html / head / body tags, and there would be id collisions et cetera.

I have no control over the upstream page, so I can't just "get the data in a more convenient format" alas.

Answer 1

You can do:

var x = $('<div>'+data+'</div>').find('h1').html();
// use x as you like

ie you don't need to append the returned data to your page to be able to get properties and values from HTML elements defined within it. This way there would be no id collisions, multiple head/body tags etc.

Answer 2

I think your best bet here is to use an iFrame. And then use jQuery on the content of that iFrame.

var old_title = $('h1').html();

$.get(url, function(data) {
    $('<iframe id="tmpContent"></iframe>').appendTo("html");
    $('#tmpContent').contents().find('html').html(data);
    var new_title = $('#tmpContent').contents().find('h1').html();
    if (new_title !== old_title) {
        do_something();
    }
    $('#tmpContent').remove();
});