title: Jquery count div elements by class from list value
body: <p>Hello i want to count all visible div Elements with the value form the list item.<br>
  Items witch are hidden have count 0<br>
  If i do the count by hand (item by item) it works, here my example:</p>
  
  <pre><code> var counter = $(".green").length-$(".green.hidden").length;
  </code></pre>
  
  <p>Here is my page how i want to use it:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="/jquery/jquery-1.7.1.min.js"&gt;
  &lt;/script&gt;
  &lt;style&gt;
    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; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ul id="list1"&gt; 
    &lt;li&gt;&lt;a href="" value=""&gt;all&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="" value=".black"&gt;black&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="" value=".blue"&gt;blue&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="" value=".green"&gt;green&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="element black"&gt;&lt;/div&gt;
  &lt;div class="element green hidden"&gt;&lt;/div&gt;
  &lt;div class="element blue"&gt;&lt;/div&gt;
  &lt;div class="element green "&gt;&lt;/div&gt;
  &lt;script&gt;
  $(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 + ")");
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The List have to look like this:<br>
  All (3)<br>
  black (1)<br>
  blue (1)<br>
  green (1)<br></p>
  
  <p>Thanks in forward</p>