script only in visible tags

Asked

Viewed 26 times

1

I want the script to count only tags <li> which are visible, but the code below counts even with display:none.

Is there anything that can do that?

I have the following 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>

javascript jquery html accountant

1 answer

2


Use the selector :visible:

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

In the case of occult, there is the :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>

Browser other questions tagged javascript jquery html accountant

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