Home/ Questions/Q 7783853
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T19:57:50+00:00

Hello i want to count all visible div Elements with the value form the

  • 0

Hello i want to count all visible div Elements with the value form the list item.
Items witch are hidden have count 0
If i do the count by hand (item by item) it works, here my example:

 var counter = $(".green").length-$(".green.hidden").length;

Here is my page how i want to use it:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery-1.7.1.min.js">
</script>
<style>
  a {text-decoration: none; }
  div { border:1px solid grey; width:200px; height: 10px; margin:3px; }
  .black { background-color:black; }
  .blue { background-color:blue; }
  .green { background-color:green; }
  .hidden { visibility:hidden; }
</style>
</head>
<body>
<ul id="list1"> 
  <li><a href="" value="">all<span></span></a></li>
  <li><a href="" value=".black">black<span></span></a></li>
  <li><a href="" value=".blue">blue<span></span></a></li>
  <li><a href="" value=".green">green<span></span></a></li>
</ul>
<div class="element black"></div>
<div class="element green hidden"></div>
<div class="element blue"></div>
<div class="element green "></div>
<script>
$(function(){
 var totalcount = 0;
 var counter = 0;
$("li a").each(function(){
 var counter = $(this).attr("value").length;
 var totalcount = totalcount+counter;

   $(this).find("span").html(" (" + counter + ") ");
});
   $("span", 'a[value|=""]').html(" (" + totalcount + ")");
});
</script>
</body>
</html>

The List have to look like this:
All (3)
black (1)
blue (1)
green (1)

Thanks in forward

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    An <a> element has no attribute value, to count elements with classes that are visible do:

    var all = $('.element').filter(":visible").length,
    green = $('.green:visible').length,

....etc

    Note that elements that are just ‘visibility:hidden” are considered visible, and this will not work on such elements.

    Here’s how I would do it:

    HTML:

    <ul id="list1"> 
  <li><a href="#" data-color="all">all<span></span></a></li>
  <li><a href="#" data-color="black">black<span></span></a></li>
  <li><a href="#" data-color="blue">blue<span></span></a></li>
  <li><a href="#" data-color="green">green<span></span></a></li>
</ul>
<div class="element black"></div>
<div class="element green hidden"></div>
<div class="element blue"></div>
<div class="element green "></div>

    jQuery:

    $(function(){
    $.each($('li a'), function(index, item) {
        if ($(item).data('color')=='all') {
            $('span', item).text(' ('+$('.element:visible').length+')');
        }else{
            $('span', item).text(' ('+$('.'+$(item).data('color')+':visible').length+')');
        }
    });
});​

    FIDDLE

    • 0