1

Pregunta básica, pero soy novato.

Deseo tener un contador de ciertos elementos en cada sección, pero no he podido realizarlo, hasta ahora llevo esto:

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>

¿Que me recomiendan?

1 respuesta 1

2

Te recomiendo que uses .each() asi:

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.