2

Mostrar quantidade de LI dentro de uma UL.

Tenho o seguinte 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>

O que eu quero fazer, é onde diz Outras Categorias (16) em "16", ele mostre a quantidade de li que consta dentro da ul.

Fiz um Jquery:

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

Gostaria de saber o que eu fiz errado. O length conta os elementos, certo? Talvez o erro seja o append, mas não sei o que colocar no lugar.

2
  • Você ão precisa colocar o + para escrever um texto não concatenado 7/10/2014 às 14:56
  • 1
    O erro é o + n +, isso é um erro de sintaxe e deve estar sendo mostrado no console do browser. Use .text(n), ou .text('Categorias(' + n + ')').
    – bfavaretto
    7/10/2014 às 14:59

3 Respostas 3

10

Primeiro, um cuidado:

Em vez de $( "li" ).length use $( ".rodapeUlCat li" ).length, para contar os <li> apenas da div desejada.

Talvez seja o caso inclusive de você usar um id separado em cada bloco caso tenha vários pela tela, ou localizar o elemento mais próximo via JQuery antes de fazer a contagem.

Desta forma, o código fica assim:

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

Fiz um JS Fiddle que gera aleatoriamente a quantidade de <li>s para demonstrar melhor.

2
  • Eu não posso usar ID, pois isso será gerenciável, e aí o ID vai repetir. 7/10/2014 às 16:11
  • Lembre-se de que você pode usar classes, e gerar um ID sequencial. O fato de ter classe não impede um ID apenas como auxiliar (você continuaria fazendo como está hoje, mas poria um ID sequencial ao gerar a página).
    – Largato
    7/10/2014 às 16:14
2

Você pode utilizar .size() para fazer esta ação.

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

Veja o exemplo

0

Existe alguma forma de realizar a contagem apenas de divs visiveis utilizando o código acima?

por exemplo no código abaixo:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .