Count the children within several elements and place the result in each element (Jquery)

Question

Count the children within several elements and place the result in each element (Jquery)

Navigation

#1 by (2 votes)

1

Basic question, but I'm a novice.

I want to have a counter for certain elements in each section, but I have not been able to do it, so far I have this:

var seccion = $('section');
var cantidadSecciones = seccion.lenght;
var doc = $('body');

function hijos(){
  
  var n = seccion.toArray().length;
  var x = $('section a').toArray().length; 
  //var a = n.each.children("a");
  
  console.log("hay "+ n +" Secciones y " + x + " Enlaces "); 
  
  seccion.find('h4').append(" (Hay " + x + " enlaces en esta sección)");
  
}

hijos();

<section>
  <h4>Título</h4>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
</section>
<section>
  <h4>Título</h4>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
</section>
<section>
  <h4>Título</h4>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
</section>
<section>
  <h4>Título</h4>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
</section>

What do you recommend?

jquery

asked by Edgar Gutiérrez 20.12.2018 в 16:59

source

1 answer

Argument 1 passed to Illuminate \ Auth \ EloquentUserProvider :: validateCredentials () LARAVEL 5.2 files * .do instead of jsp?

score 2 · Accepted Answer

I recommend you use .each() like this:

var seccion = $('section');
var cantidadSecciones = seccion.lenght;
var doc = $('body');

function hijos(sec){
  
  var n = seccion.toArray().length;
  var x = $(sec).find('a').toArray().length; 
  //var a = n.each.children("a");
  
  console.log("hay "+ n +" Secciones y " + x + " Enlaces "); 
  
  $(sec).find('h4').append(" (Hay " + x + " enlaces en esta sección)");
  
}
$.each(seccion, function(i, sec) {
  hijos(sec);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section>
  <h4>Título</h4>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
</section>
<section>
  <h4>Título</h4>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
</section>
<section>
  <h4>Título</h4>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
</section>
<section>
  <h4>Título</h4>
  <div>
    <ul>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
      <li><a href="">Enlace</a></li>
    </ul>
  </div>
</section>