how to know if a DOM element is in the jquery scope?

Question

Possible Duplicate:
jquery select iframe children

I have many frames in my asp.net website. Since I don't know its layout and I need to update a <span> value in a diferent diferent frame where my jquery code is, I do the following:

$('#myspan').text('sometext');

but anything changes. So I don't know if it's because jquery didn't manage to catch the element with this selector because is not in its scope or why.

However this:

alert($('#myspan')); it shows an alert with [object][object] as result.

`$(#'myspan')` looks wrong, you probably mean `$('#myspan')` — Halcyon, Jan 04 '13 at 17:00
`alert($())` will also show `[object Object]` because `$()` always returns an object. — Kevin B, Jan 04 '13 at 17:01
`alert($('#myspan'));` showing `[object Object]` does not mean it's matched an element. jQuery always returns an object whether it's matched something or not. If you do `alert($('#myspan').length);`, you'll probably see it's matched no elements. — Matt, Jan 04 '13 at 17:01
See http://stackoverflow.com/questions/2893280/jquery-select-iframe-children for how to get elements within an `` — Matt, Jan 04 '13 at 17:03
Use a browser that has a good console (webkit) and use `console.log($('#myspan'));`. This is much better than alerting objects as strings. — iambriansreed, Jan 04 '13 at 17:06
Iambrinsreed, like this what is expected to be in the console if it works? — anmarti, Jan 04 '13 at 17:09
@a_maar you will actually see: `['...']` in the console. saying it found 1 item with that id. — iambriansreed, Jan 04 '13 at 17:11
Matt I don't need to get element within `iframes` but within `frames` in the site. — anmarti, Jan 04 '13 at 17:32

bfavaretto · Accepted Answer · 2013-01-04T17:22:21.337

3

The jQuery function ($('someSelector')) will always return an object, even if no elements match the selector.

If you really are using multiple frames, you have a problem: jQuery can't find elements across frames, only in the current document/frame – unless you pass a proper context object for the specific document you want to target.

For example, if you have an <iframe id="myframe">, you can look for #myspan inside it with this:

var frameDoc = $('#myframe')[0].contentWindow.document;
var mySpan = $('#myspan', frameDoc);

For that to work, the iframe's source must be hosted in the same domain as the main page. There's also the following cleaner options, suggested in the comments below:

var mySpan = $("#myframe").contents().find('#myspan')

or

var mySpan = $('#myspan', $("#myframe").contents());

edited Jan 04 '13 at 17:22

answered Jan 04 '13 at 17:03

bfavaretto

71,580
16
111
150

1

Does the context work across frames? What is the proper context - `iframe.document`? – John Dvorak Jan 04 '13 at 17:04
@JanDvorak I suppose *yes* and *ifr.contentWindow.document*. Will test now to confirm. – bfavaretto Jan 04 '13 at 17:06
2

@JanDvorak: The [SOP policy](http://en.wikipedia.org/wiki/Same_origin_policy) ***will*** bite you here if your frames are on different domains. – Matt Jan 04 '13 at 17:06
@Matt even with CORS headers? – John Dvorak Jan 04 '13 at 17:07
3

`var mySpan = $('#myspan', $("#myframe").contents());` is a little prettier. – iambriansreed Jan 04 '13 at 17:08
1

@JanDvorak: AFAIK CORS permits x-domain requests, not x-domain DOM traversing. See http://stackoverflow.com/questions/6460200/can-cross-origin-resource-sharing-headers-authorize-x-domain-iframe-access (and non of these approaches are well supported). – Matt Jan 04 '13 at 17:09
1

@JanDvorak Just to confirm: I tested, and it works (for the same domain, x-domain shouldn't work). – bfavaretto Jan 04 '13 at 17:11
@iambriansreed jQuery `contents` docs even advocates `$("#myframe").contents().find('#myspan')` – John Dvorak Jan 04 '13 at 17:13
@JanDvorak so not just prettier but recommended by the jQuery docs? – iambriansreed Jan 04 '13 at 17:21
@iambriansreed not explicitly, but used in an example. – John Dvorak Jan 04 '13 at 17:23

score 1 · Answer 2 · answered Jan 04 '13 at 17:06

A good way to debug jQuery problems is this pattern:

var e = $(...);
console.log(['Explanation', e.get()]);

get() without arguments will convert the strange jQuery selector result to a normal JavaScript array which you can expand in your browser's console. That should help to see what the selector returned.

If it doesn't match anything, then your selector is wrong somehow. Check the current DOM in your browser's development tools if the element is really there.

how to know if a DOM element is in the jquery scope?

2 Answers2