Targeting an iFrame once with jQuery

Question

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.

score 0 · Answer 1 · answered Mar 19 '10 at 14:56

0

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

answered Mar 19 '10 at 14:56

Joel

19,175
2
63
83

score 0 · Answer 2 · answered Mar 19 '10 at 14:56

0

What about Delegates?

answered Mar 19 '10 at 14:56

easement

6,119
3
29
36

score 0 · Answer 3 · answered Mar 20 '10 at 12:41

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.

Targeting an iFrame once with jQuery

3 Answers3