Using jQuery to Count Children of an Element

We can use jQuery to count the children of an element by making use of the jQuery children() method along with the JavaScript String length property.

var number_of_children = $("#div").children().length;

Let’s see this in action with a simple example.

Here we will have some HTML that will include an element with several child elements.

<div id="parent-div">
  <div class="child-div">
    <p id="title">Some text in the div.</p>
  </div>
  <div class="child-div">
    <p id="title">Some text in the div.</p>
  </div>
  <div class="child-div">
    <p id="title">Some text in the div.</p>
    <p id="title">Some text in the div.</p>
  </div>
  <p>Some more text</p>
</div>

As you can see in the code above, the div, #parent-div, should have 4 children, 3 div child elements and a paragraph child element.

We can use our code above to see if we get this answer.

var number_of_children = $("#parent-div").children().length;

console.log(number_of_children);

#Output
4

Let’s take a look at another example using a list.

<ul>
  <li>red</li>
  <li>yellow</li>
  <li>green</li>
  <li>purple</li>
  <li>red</li>
  <li>pink</li>
  <li>black</li>
  <li>orange</li>
</ul>

To see how many children are in our unordered list, we can use our code again.

var number_of_children = $("ul").children().length;

console.log(number_of_children);

#Output
8

Finally, let’s take a look at one final example using some code from the front page of this site.

  <div class="home-page-examples">
    <h2 class="home-examples-title">Become an Expert Programmer through Interactive Examples</h2>
    <div class="home-nav">
      <div class="home-nav-item home-nav-javascript home-nav-selected">JavaScript</div>
      <div class="home-nav-item home-nav-jquery">jQuery</div>
      <div class="home-nav-item home-nav-python">Python</div>
      <div class="home-nav-item home-nav-php">PHP</div>
      <div class="home-nav-item home-nav-html">HTML</div>
      <div class="home-nav-item home-nav-sas">SAS</div>
      <div class="home-nav-item home-nav-vba">VBA</div>
    </div>
    <div class="examples-container examples-javascript">
      <div class="featured-example-title">JavaScript – Featured Example</div>
    </div>
    <div class="examples-container examples-python">
      <div class="featured-example-title">Python – Featured Example</div>
    </div>
    <div class="examples-container examples-php">
      <div class="featured-example-title">PHP – Featured Example</div>
    </div>
    <div class="examples-container examples-jQuery">
      <div class="featured-example-title">jQuery – Featured Example</div>
    </div>
    <div class="examples-container examples-html">
      <div class="featured-example-title">HTML – Featured Example</div>
    </div>
    <div class="examples-container examples-sas">
      <div class="featured-example-title">SAS – Featured Example</div>
    </div>
  </div>

As you can see in this HTML example, we have many parent divs with children. Let’s use our code once again to see how many different children certain elements have.

Each variable name will be a div element in the example above.

var home_page_examples = $(".home-page-examples").children().length;
var home_nav = $(".home-nav").children().length;
var examples_container = $(".examples-container").children().length;
var examples_javascript = $(".examples-javascript").children().length;

console.log(home_page_examples);
console.log(home_nav);
console.log(examples_container);
console.log(examples_javascript);

#Output
8
7
6
1

Hopefully this article has been useful in helping you understand how to use jQuery to count the children of an element.