Compter les balises li d'une liste ul avec JQuery

Présentation

Tous les développeurs ou webmaster / intégrateur intégrent souvent dans leurs pages des listes non ordonnées soit (ul li ).
Et j'avais besoin de faire ce genre de chose pour un projet.
Mais ces listes peuvent être dans la page soit en dur ou soit générées en php avec l'utilisation ou sans de MySQL.
Et quelques fois, on a besoin de savoir comme dans le cas ci-dessous, d'avoir le nombre de balise (li) ou d'item ou de lien présent dans chaque liste (ul), surtout quand le menu est fermé par défaut.

 

Pour commencer, ou étayer mes propos voici deux images, ces images vous les connaissaient , ce sont mes menus Accordions de mes catégories.

avec sqlsans sql


A gauche un menu Accordion tout en php / MySQL, donc le comptage des liens ou item de chaque balise (ul) est faite avec une requête SQL.
A droite un autre menu Accordion réalisé tout en dur, et là le comptage est totalement différents.
Certe dans ce menu il n'y a qu'un seul bloc (ul) avec un certain nombre de balise (li).



La présentation du nombre de balise (li) devant chaque item est tout en css3.


Voyons dans un premier temps le code html du menu.

Code html simple

        <div class="accordion">
          <h4>Sommaire</h4>
            <section id="a1">
              <h3><a class="txt1" href="#a1">Nombre de li</a></h3>
                  <div>
                    <ul id="nb1">
                    <li><a href="#">Lien 1</a></li>
                    <li><a href="#">Lien 2</a></li>
                    <li><a href="#">Lien 3</a></li>
                    <li><a href="#">Lien 4</a></li>
                    <li><a href="#">Lien 5</a></li>
                    </ul>
                  </div>
          </section>
        </div>
        

Code JavaScript

Ci-dessous le code JavaScript du menu Accordion, et dans la fonction (ready) j'ai ajouté (ligne 10 et 11), le comptage des balises (li) du bloc (ul)

          <script>
            $(document).ready(function () {
                $(".accordion h3").click(function () {
                    if ($(this).next().is(":hidden")) {
                        $(".accordion h3").removeClass("active").next().slideUp();
                        $(this).addClass("active").next().slideDown()
                    }
                    return false
                })
                var length1 = $('#nb1 > *').length;
                $(".txt1").append('<span class="art">'+ length1 +'</span>');
            });            
		</script>
        

Code CSS

Ajouter cette classe dans le code CSS qui gére le menu accordion. Cette classe permet d'afficher dans un rond ovale le nombre de balise (li) du bloc (ul).

          .art{font-size:11px; color:#fff; font-weight:bold; padding:2px 10px 2px 10px; float:right;
          background: #404247;
              -webkit-border-radius: 15px;
              -moz-border-radius: 15px;
              border-radius: 15px;
           
              -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
              -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
              box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
          }
        

Bon dev