How to count child element using jQuery ?
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:
<!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 > 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:
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width" > < title >Count child elements using jQuery.</ title > < script src = </ 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:
Please Login to comment...