Learning jQuery

If you ever find yourself needing to know how many child elements an HTML element has, you're in luck, because there's a jQuery function for that.

There are actually a few different ways you can go about doing this. The first is really simple and straightforward, and will count all the children elements of an element, regardless of what type of element it is or its class or id names. To do this, we just need to use the .children() method and chain it with the .length() method, and apply it to the element in question whose children total we'd like to know. So, for example, if we'd like to know how many children a div element with the id of #main has, we can use the following snippet:

$("#main").children().length;

Okay, that's easy enough. But what if you're trying to find something more specific, like the number of children of an element that are <p> tags, or <h1> tags, then the code is a little bit more complicated.

You might know that you can use jQuery selectors a lot like CSS selectors (and if you don't know, try reading this handy guide to brush up on your jQuery skills). So in CSS, if you want to select the direct child of an element, you do so by using the > symbol after the parent but before the child element. For example, in CSS, if you want to select the p elements that are children of any div element with the #main ID, you'd use the following code:

div#main > p{
   //insert code here
}

In jQuery, it's actually almost the same principle. To select the specific children elements of an element, your selector would look almost exactly the same as it would in CSS (except, of course, for the jQuery syntax). From there, you just need to apply the .length() method to your selector to count all of the children. So if you're trying to count all of the p element children of the #main div, your jQuery code can look like this:

$("main > p").length;

There you go, that's all it takes.