jQuery: Count Elements, Images, Classes etc

Each jQuery selector is also an array of the related elements and has the property "length". We can make use of that to determine the number of certain elements of a website.

With this method, everything is possible to count, what we can select with jQuery: the number of images, the number of headings, the number of p elements, the number of links, the number of elements with a certain ID or class, other more complicated combined constructs and much more.

First, let's look at a simple example:

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

alert("The page contains " + number + " images.");

With the selector $('img'), we are selecting all images from the current page (images are marked with the "img" tag in HTML, provided that they are not embedded as a background image of an element via "background-image" or the like). After that, we display an alert showing the number of images.

More Examples

Let's look at some more examples of determining the number of elements with a certain ID or certain classes:

var num1 = $('.a').length;
var num2 = $('#b').length;
var num3 = $('.c.d').length;

Here, first of all, we are determining the number of elements with the class "a", then all elements with the ID "b" and finally all elements having classes "c" and "d" assigned.

You can use each jQuery selector you can imagine for this.

Check whether a certain Element exists

Even if we are not interested in the exact number of a certain element or a certain element group, but we just want to know whether one of these elements is existing on our web page, we can work with the method presented here. We just have to check whether .length is 0 or larger than 0, to know whether there are elements of this type or not.