JQUERY gotcha, Why can't I change inside an iframe that is hosted locally?

Question

Give the following on a page:

<iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor" style="width: 100%; height: 100%;" id="hi-world">
<p><span class="tipoff" title="System tooltip for search engines">Download now</span></p><p>adasdads</p><p>a</p><p><span class="tipoff" title="System tooltip for search engines">Download n1111ow</span></p>
</iframe>

The following works:

$('#hi-world').css("width","10px");

But what I want to do is change the paragraphs in the iFrame, and this does not work:

$('#hi-world').find('p').css("background","red");

Answer 1

ok just figured it out:

$('#hi-world').contents().find('p').css("background","red");

Answer 2

The first is changing the css of the iframe element. To do the second, you have to access the contentDocument. As noted, in jQuery you can use contents for this.