JQuery show number of matches in a list.

Jquery function to count up same objects in a list and show on screen how many there are. Like Apple Mail count. ~ Andrew Pougher

by Andrew Pougher

HTML

<section id="listed">
  <div id="January">January 2012</div>
  <div id="2">January 2012</div>
  <div id="3">January 2011</div>
  <div id="4" class="DD21">March</div>
  <div id="5" class="DD21">March</div>
  <div id="6">April</div>
      <div id="7">May</div>


</section>
<br clear="both">
<hr>
<span class="groupttl">x</span>&&nbsp;&nbsp;&nbsp;&nbsp;= Numbers traveling in month

<br>

<span id="chart"></span>

CSS

section{display:block;width:500px;clear:left}

.big{font-size:23px}
div { width:60px; height:60px; margin:5px; float:left;
    display:inline:block;
    font: 11px arial;
    line-height:34px;
        border:3px white solid;
    vertical-align:middle;
    text-align:center;
    -moz-border-radius: 35px;
    border-radius: 35px;
}
.groupttl{
    font:10px arial;
    background:#cc1100;
height: 12px;
    text-align:center;
width: 12px;
text-indent:none;
    border:2px solid #fff;
    color:#fff;
    display:block;
    position:absolute;
margin-top:-2px;
    
-moz-border-radius: 35px;
border-radius: 35px;
    ;text-shadow:1px 1px rgba(000, 000, 000, 0.5);
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .4);
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .4);
}

JavaScript

/*----------------------------------------------------
     style and play with possibilities
-----------------------------------------------------*/
$("div").css("background", "#ddd")
            .filter(function (index, item) {
                var cnt = item.innerText;
                var ttlnt = $("div").hasClass(cnt);
                  return index == 1 || $(this).attr("id") == cnt || $(this).hasClass(cnt);
                })
            .css("border", "3px solid red")
      

/*----------------------------------------
     Count up
-----------------------------------------*/
$("#listed div").each(function(index, item){
   $(this).prepend("<span class='groupttl'>" + howmany(item.innerText) + "</span>")
      });
      
function howmany(c){
    var ddd = $("div:contains('" + c + "')").length;
 return (ddd)
}
     
     
/*------------------------------------------------------
     ANother way to filter and Add Class if inArray
-------------------------------------------------------*/
     var months =   new Array("January","February","March","April","May","June","July","August","September","October","November","December");

 
     
     
var a = $.makeArray($("#listed span").text())
var unique=a.filter(function(itm,i,a){
    return i==a.indexOf(itm);
});

//alert(unique);
    
    var numItems = $('#listed span').text()
        alert(numItems)
    
var obj = {};
var num = 0;
$("span").each(function() {
  var cl = $(this).text();
  if(!obj[cl]) {
    obj[cl] = {};
    num++;
  }

});
    $("#chart").text(num );