1

Quero que o script faça a contagem apenas das tags <li> que estão visíveis, mas o código abaixo faz a contagem mesmo com display:none.

Existe alguma coisa que faça isso?

Tenho o seguinte HTML:

  $( ".rodapeUlCat" ).append( $( "<li>" ) );
var n = $( ".rodapeUlCat li" ).length;
$( ".rodapeCat" ).text( " categorias( " + n + " )" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 style="display:none"><h3><a href="/paginaSYS">tituloMenuSYS</a></h3></li>
    </ul>
    <div class="rodapeCat"></div>

1 Resposta 1

2

Use o seletor :visible:

$( ".rodapeUlCat li:visible" ).length

No caso das ocultas, existe o :hidden

DEMO

 $(".rodapeUlCat").append($("<li>"));
 var n = $(".rodapeUlCat li:visible").length;
 $(".rodapeCat").text(" categorias( " + n + " )");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 style="display:none">
    <h3><a href="/paginaSYS">tituloMenuSYS</a></h3>
  </li>
</ul>
<div class="rodapeCat"></div>

0

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 .