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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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