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

StackOverflow https://stackoverflow.com/questions/12025757

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?

Was it helpful?

Solution

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");

OTHER TIPS

Use find:

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

Try with:

rt2body = iframeElement.find("body");

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top