Count images with jquery and then output the #

Question

I am looking to count the number of images with a certain div class name and then output the that number that is calculated to display it on a page. Any advice on how to get this. It would be used to let the user know how many images are in my image scroller. Eventually I would like to figure out how to get a dynamic list like 1/10, 2/10, etc... based on what image the user is on.

here is the page so you can see what I am talking about with the scroller.

http://www.cdtto.com/site/?p=5

I have the scoller which pulls images from a custom field in worpress, I can add as many images as I like. I used the scrollTo.js jquery to scroll the images, I am looking to get a count of the image and would like to have that output

Answer 1

You could use this code:

var numImgs = $('div.myClassName img').length;
alert(numImgs);
$('div#count').text(numImgs);

Unlike the other examples, this one searches for the number of images contained in a div with a given class name.

Answer 2

The jQuery selector returns an array so just get the length of it. For example:

jQuery(".image").Length

Refer to the jQuery Selectors page if you need more complex selection queries. You said all the images in a div the query you'd use is something like jQuery("div#divName img")

Answer 3

$(".divClassName").find("img").length

is that what you're looking for?

Answer 4

Based on your actual markup at http://www.cdtto.com/site/?p=5 :

//Count images inside element with 'feature' classname
var featureImageCount = $('div.featured img').length;

//Add element to display count to user
$('#header3 .featured-bar').after('<div>' + featureImageCount + ' Images</div>');