Targeting an iFrame once with jQuery

Question

Hi,

I have a series of frames (4) which are used in a page to create loading of dynamic content through Ajax calls.

In each of these frames I target parent level elements and update them with there respective content e.g.

$("#loadingGrid1",top.document).show();
$("#frameSkills",top.document).hide();

In jQuery is there a way to instead of targeting specific elements on the parent page multiple times, simply target the page once into a variable e.g.

var parentPage=$('#frameSkills',top.document);

And then use this variable to apply content like $(parentPage > #loadingGrid1).hide()

Hope I've explained what I'm after enough. Basically, I'm having to call "top.document" in every jQuery selector I make and it seems like a waste of energy.

Answer 1

A Jquery object can be used as a context just like a DOM node.

var parentPage = $('#frameSkills',top.document);
$("#myselector", parentPage).dostuff();

Or you can use the find function:

parentPage.find("#myselector").dostuff();

Answer 2

What about Delegates?

Answer 3

Something like this seems cleanest to me:

var page = $(top.document); //Define once
page.find("#loadingGrid1").show();
page.find("#frameSkills").hide();

When you call $(selector, context) you're (in all cases like this anyway) calling context.find(selector) inside anyway...might as well make it easy to read/write/chain as you go.