Es muy simple contar la cantidad de elementos secundarios en el archivo HTML usando jQuery. Por ejemplo: si tiene un elemento principal que consta de muchos elementos secundarios, puede usar el método .length o.children().length como se indica a continuación.
Sintaxis:
var len=$("#parentID").length;
o
var count = $("#parentId").children().length;
Ejemplo 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> <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>
Producción:
Ejemplo 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= "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>
Producción:
Publicación traducida automáticamente
Artículo escrito por _tanya_sri_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA