script only in visible tags

Question

script only in visible tags

Navigation

#1 by (2 votes)

1

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

Is there anything that does this?

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><ulclass="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 html jquery contador

asked by anonymous 25.10.2016 / 22:58

1 answer

Chained list without head, problem in intersection function Problem downloading FTP / PHP files

score 2 · Accepted Answer

Use the :visible switch:

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

In the case of hidden ones, there is :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><ulclass="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>