How to replace entire CSS of a page after an ajax request with jQuery?

I have a document with one CSS linked in. How can I replace the current CSS with one coming from a document that I just fetched with AJAX request using jQuery?

Here's the code I am trying right now, but with no success so far:

$(function() {
    $.get('next_page.html', function(data, textStatus) {
        $('link[rel=stylesheet]:first')
            .attr('href', $(data).find('link[rel=stylesheet]:first').attr('href'));
    });
});

Update: $.find() does not work in any browser (tested Firefox 3.5, Chrome and Safari 3 on Mac), but $.filter() found the stylesheet only in Firefox 3.5 - still nothing in Chrome and Safari 3.

It should be plain simple, right - replace the current CSS href with the new one, and voilá?

For some reason, jQuery fails to find anything inside the <head> tag that is coming from AJAX request. Furthermore, jQuery even fails to find the whole <head> itself from the AJAX data. In other words, $(data).find('head').size() inside the callback function returns 0.

I am using jQuery 1.4.

UPDATE Feb 10, 2010: I filed a bug about this to jQuery and they agreed it is not possible to find anything from the <head> tag from an ajax data. Here's the response I got:

http://dev.jquery.com/ticket/6061#comment:1 — "Yep, that's correct - parsing straight HTML we only guarantee the contents of the body element. If you wish to access the XML of the page directly then I recommend that you explicitly make the file .xhtml or request it as XML, for example:"

Solution

This is valid as per jQuery dev team — "parsing straight HTML we only guarantee the contents of the body element. If you wish to access the XML of the page directly then I recommend that you explicitly make the file .xhtml or request it as XML, for example:"

$.ajax({ dataType: "xml", file: "some.html", success: function(data){ ... });