Question

I’m trying to write jQuery code to count the number of <img> elements contained on a site. The site is comprised of 4 separate HTML pages, all in the same folder on the server. Only one of these pages, “pics.html”, loads the .js file that needs to perform this function (pics.html is the only page that needs to know how many images are on the site).

It’s easy to get the <img> elements from pics.html, since pics.html is the page that loads the script:

var numImgs = $('img').length;

…but I’m confused as to how I would perform this same function in reference to a different page. Is it possible to specify the HTML page that the selector refers to?

I tried this, as a wild guess:

var numImgs = $('test.html:img').length;

Unsurprisingly, it didn’t work. I googled for the answer, but couldn’t find a solution – or if I did find one, I suppose I didn’t understand it well enough to realize that it was the answer.

Thanks for any help you can offer!

Answer 1

To select an object from an external file, you’ll need to use $.load().

Reference: http://api.jquery.com/load/