How to count child element using jQuery ?

How to count child element using jQuery ?

Last Updated : 27 Apr, 2020

It is very simple to count the number of child elements in the HTML file using jQuery. For example: If you have a parent element consisting of many children elements then you can use .length or.children().length method as given below. Syntax:

var len=$("#parentID").length;

or

var count = $("#parentId").children().length;

Example 1:

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Count child elements using Jquery</title>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <div id="parentID">
        <p>Red</p>
        <p>White</p>
        <p>Green</p>
        <p>Black</p>
        <p>Blue</p>
        <p>Orange</p>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" 
        crossorigin="anonymous">
    </script>

    <script>
             
        // Here we count the child element in parentID
        var count = $("#parentID p").length;
        document.writeln(count);
    </script>
</body>

</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>Count child elements using  jQuery.</title>
   <script src=
      "https://code.jquery.com/jquery-3.4.1.js">
    </script>
</head>

<body>
   <div id="parentId">
   <ul>
      <li>1 child</li>
      <li>2 child</li>
      <li>3 child</li>
      <li>4 child</li>
      <li>5 child</li>
    </ul>
    </div>
    <script>
         var count = $("#parentId ul").children().length;
         document.writeln(count);
    </script>
</body>

</html>

Output:

How to count child element using jQuery ?

_tanya_sri_

Improve

Article Tags :

Similar Reads

How to count all elements within a div using jQuery ?

In this article, we will count all elements inside a div element using jQuery. To count all elements inside a div elements, we use find() method and length property. The find() method is used to find all the descendant elements of the selected element. It will traverse all the way down to the last l

How to filter the children of any element using jQuery ?

In this article we will learn how to filter the children of any element in JQuery. JQuery is a fast and lightweight JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. It is widely famous for its motto o

How to check an HTML element is empty using jQuery ?

Given an HTML document and select an element from the HTML document and check that element is empty or not. There are two methods used to solve this problem which are discussed below: Method 1: Using the ":empty" selector: The element to be checked using is() method. The is() method is used to check

How to get specific number of child elements using CSS?

The :nth-child() CSS pseudo-class is used to style elements based on their position in a parent element's child list. This selector allows you to target elements in a specific position or match them based on patterns such as odd or even positions, or by using a linear equation.Syntax:element:nth-chi

How to select elements with no visible children using jQuery ?

In this article we are going to learn how to select elements whose property is not visible or hidden. It simply means that the display property of that particular element is hidden, and we need to show whatever present in that element using the Jquery.We can easily do this by using the Jquery:hidden