¿Cómo contar elementos secundarios usando jQuery?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *