title: How to replace entire CSS of a page after an ajax request with jQuery?
body: <p>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?</p>
  
  <p>Here's the code I am trying right now, but with no success so far:</p>
  
  <pre><code>$(function() {
      $.get('next_page.html', function(data, textStatus) {
          $('link[rel=stylesheet]:first')
              .attr('href', $(data).find('link[rel=stylesheet]:first').attr('href'));
      });
  });
  </code></pre>
  
  <blockquote>
    <p><strong>Update:</strong> $.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.</p>
  </blockquote>
  
  <p>It should be plain simple, right - replace the current CSS href with the new one, and voilá?</p>
  
  <p>For some reason, jQuery fails to find anything inside the <code>&lt;head&gt;</code> tag that is coming from AJAX request. Furthermore, jQuery even fails to find the whole <code>&lt;head&gt;</code> itself from the AJAX data. In other words, <code>$(data).find('head').size()</code> inside the callback function returns 0.</p>
  
  <p>I am using jQuery 1.4.</p>
  
  <hr>
  
  <p><strong>UPDATE Feb 10, 2010: I filed a bug about this to jQuery and they agreed it is not possible to find anything from the <code>&lt;head&gt;</code> tag from an ajax data.</strong>
  Here's the response I got: </p>
  
  <blockquote>
    <p><a href="http://dev.jquery.com/ticket/6061#comment:1" rel="nofollow noreferrer">http://dev.jquery.com/ticket/6061#comment:1</a> — "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:"</p>
  </blockquote>