Question

I have an iFrame. All its elements are loaded. Anyway, I am not able to select elements using jQuery selector by “part” of the id/class/etc.

This is my code:

//Not working
$('#iFrameID').contents().find($('[id^="lodingImg"]')));

//Works 
$('[id^="lodingImg"]'))

Dos anyone knew if this type of jQuery selectors do not works in the iFrame. I have recently read that .live is not working in iframe, too. So, my questions is if I am doing something wrong or this is limitation of the library?

Thanks in advance.

Answer 1

.find() will quite happily take a selector as a string, there’s no reason to wrap that selector in a call to the jQuery function. And, in fact, there’s probably a reason not to do so, since I suspect that’s what’s causing your code not to work.

This code:

$('#iFrameID').contents().find($('[id^="lodingImg"]'));

will look for elements in $('#iFrameID').contents() that match the elements found by $('[id^="lodingImg"]') – which will be run on the parent window calling the Javascript, not the <iframe> element, and likely return zero elements.

Simply call:

$('#iFrameID').contents().find('[id^="lodingImg"]');

instead.