Access HTML elements from embedded object using jQuery

Question

I have a webpage as an embedded object on another webpage. I am trying to access a class selector within the embedded object from the parent page. The class is not being found.

JS:

$myObj = $('.embeddedObject').contents().find('.findDiv');
if($myObj.length) {
    console.log("object found");
}

HTML on parent:

<div class="embeddedObject">
    <object data="testing.html"></object>
</div>

HTML on testing.html

<div class="findDiv">testing test</div>

The div is not being found despite that fact that I know it exists. What am I doing wrong?

Answer 1

The jQuery context is not pointed to the correct element. If you take a look at the jQuery documentation , you can see that jQuery selectors can take in a second argument (context).

After the selector, you can specify a DOM Element, Document, or jQuery that it will use to look for your selector.