Count amount of LI within a UL

Asked

Viewed 14,327 times

2

Show amount of LI within a UL.

I have the following HTML:

<ul class="rodapeUlCat margin-top-25">
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
    </ul>
    <div class="rodapeCat">Outras Categorias (16)</div>

What I want to do is where it says Other Categories (16) in "16", it shows the amount of li which is contained within the ul.

I made a Jquery:

$( ".rodapeUlCat" ).append( $( "<li>" ) );
var n = $( "li" ).length;
$( ".rodapeCat" ).text( + n + );

I would like to know what I did wrong. The length counts the elements, right? Maybe the mistake is the append, but I don’t know what to put in place.

jquery

  • You don’t need to put the + to write an unconnected text

  • 1

    The mistake is the + n +, this is a syntax error and should be shown in the browser console. Use .text(n), or .text('Categorias(' + n + ')').

3 answers

10


First, a care:

Instead of $( "li" ).length use $( ".rodapeUlCat li" ).length, to count the <li> only from the desired div.

Maybe it’s the case that you even wear one id separated in each block if you have several by screen, or locate the nearest element via Jquery before counting.

This way, the code looks like this:

var n = $( ".rodapeUlCat li" ).length;
$( ".rodapeCat" ).text( "Outras categorias( " + n + " )" );

I made a JS Fiddle which randomly generates the amount of <li>s to better demonstrate.

  • I can’t use ID because it will be manageable, and then the ID will repeat.

  • Remember that you can use classes, and generate a sequential ID. Having class doesn’t just prevent an ID as a helper (you would continue to do as you are today, but it would put a sequential ID when generating the page).

2

You can use .size() to do this deed.

var total = $(".rodapeUlCat li").size();
$(".rodapeCat").text(total);

See the example

0

Is there any way to count only visible Ivs using the above code?

for example in the code below:

var total = $(".rodapeUlCat li").size();
    $(".rodapeCat").text(total);
.esconde{
  display:none;
  }
<ul class="rodapeUlCat margin-top-25">
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
        <li class="esconde><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
    </ul>
    <div class="rodapeCat">Outras Categorias (16)</div>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.