How to select element based on another already-existing selector?

Question

I have the following code:

<html>
    <head>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
        google.load("jquery", 1);
        </script>
        <script type="text/javascript">
            var rt, rt2;
            window.onload = function () {
                rt = $('#rt').contents().get(0);
                rt.designMode = 'On';
            }
        </script>
    </head>
    <body>
        <iframe id="rt" width="500" height="500"></iframe>
    </body>
</html>

rt is currently selecting the whole iframe document. I want rt2 to select the body element inside the document element, which is what rt is selecting. I tried:

rt2 = jQuery(rt, "html");
rt2 = jQuery(rt2, "body");

But it didn't seem to work. How would it be possible?

Christofer Eliasson · Accepted Answer · 2012-08-19T10:29:25.280

2

According to the documentation, the context to search within should be supplied as the second parameter, not the first, so try this instead:

rt2 = jQuery("html", rt);

The context can be:

A DOM Element, Document, or jQuery to use as context

Internally, the context is implemented using the .find() method. So the above example is just a short hand of:

rt2 = jQuery(rt).find("html");

edited Aug 19 '12 at 10:29

answered Aug 19 '12 at 10:22

Christofer Eliasson

32,939
7
74
103

score 1 · Answer 2 · answered Aug 19 '12 at 10:21

1

Use find:

var myFrame = $('#rt').contents();
var myvar = myFrame.find('body');

answered Aug 19 '12 at 10:21

Zbigniew

27,184
6
59
66

score 1 · Answer 3 · answered Aug 19 '12 at 10:22

1

Try with:

rt2body = iframeElement.find("body");

Further reading on .find: http://api.jquery.com/find/

answered Aug 19 '12 at 10:22

Jeff

12,085
12
82
152

How to select element based on another already-existing selector?

3 Answers3