How to count child element using jQuery ? Last Updated : 27 Apr, 2020 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to count child element using jQuery ? _tanya_sri_ Follow Improve Article Tags : Web Technologies JQuery jQuery-Misc 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 1 min read 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 3 min read 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 3 min read 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 2 min read 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 2 min read How to iterate through child elements of a div using jQuery ? jQuery Selector can be used to find (select) HTML elements from the DOM. Once an element is selected, the jQuery children() method is called to find all the child elements of the selected element. To loop through the child elements, the jQuery each() method is used as demonstrated in the following e 3 min read Create a Div Element using jQuery In this article, we will see how to create a <div> element using jQuery. We can create a div element with the following steps: Steps to Create a Div ElementCreate a new <div> element.Choose a parent element, where to put this newly created element.Put the created div element into the par 2 min read How to count all child elements of a particular element using JavaScript ? Given an HTML document containing some elements nested elements and the task is to count all the child elements of a particular element. It is very simple to count the number of child elements of a particular element using JavaScript. For example: If you have a parent element consisting of many chil 1 min read How to execute jQuery Code ? jQuery is an open-source feature-rich Javascript library that is designed for the simplification of HTML DOM Tree traversal & manipulation, event-handling & CSS animation. It is quite popular for its features like light-weight, fast, small, etc, that make it easier to use. The purpose of usi 4 min read How to select all sibling elements of an element using jQuery ? In this article, we will discuss how to select all sibling elements of an element using jQuery. To select all sibling elements of an element, we will use the siblings() method. The siblings() method is used to find all sibling elements of the selected element. The siblings are those having the same 2 min read Like