JQuery Contains: matching elements and returning the totals of each

Using JQuery to match the date in a list, returning the totals and passing those to a calendar chart as totals in that given month. ~ Andrew Pougher

by Andrew Pougher

HTML

<div id="listed">
  <div>January 2012</div>
      <div>January 2012</div>
      <div >January 2012</div>
      <div >January 2012</div>
      <div >January 2012</div>
  <div>January 2012</div>
  <div >January 2011</div>
  <div>March 2012</div>
  <div>March 2012</div>
  <div> March 2011</div>
  <div>April 2011</div>
    <div>May 2012</div>
    <div>June 2012</div>
        <div>June 2012</div>
        <div>June 2012</div>
        <div>June 2012</div>
        <div>June 2012</div>
        <div>June 2012</div>
        <div>June 2012</div>
        <div>June 2012</div>
        <div>June 2012</div>
    
</div>


<br clear="both">

<span class="groupttl">x</span>&&nbsp;&nbsp;&nbsp;&nbsp;= Matching date totals (Month)
<hr>
<br>


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

<h1>Match month to the List above</h1>
<ul id="m">
    <li>January</li>
    <li>February</li>
<li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>July</li>
    <li>August</li>   
    <li>September</li>
    <li>October</li>
    <li>November</li>
    <li>December</li>
</ul>

CSS

.big{font-size:23px}
#listed div { width:60px; height:60px; margin:5px; float:left;

    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);
}

.mnthttl{
    font:10px arial;
    background:blue;
height: 12px;
    text-align:center;
width: 12px;
text-indent:none;
    border:2px solid #fff;
    color:#fff;
    display:block;
    position:absolute;
margin-top:-6px;
   margin-left:64px; 
-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);
}


p{padding:30px}

ul#m{background:#e3e3e3;min-height:145px;border:1px solid #333}

#m li{float:left;padding:6px;width:80px;height:50px;
 border-right: 3px solid #e3e3e3;background: #fff  url(http://www.focusdashboard.com/img/chart-bg.gif) 0 0 no-repeat;margin-top:5px }

JavaScript

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


/*------------------------------------------------------------
     Count up month reoccurences in div and append with number 
-------------------------------------------------------------*/
$("#listed div").each(function(index, item) {
    $(this).prepend("<span class='groupttl'>" + howmany(item.innerText) + "</span>");
});

function howmany(m) {
    var monthmatch = $("div:contains("+m+")").length -1;
    return (monthmatch)
}
/*------------------------------------------------------------
 Count reoccurences of month in circles as totals 
-------------------------------------------------------------*/
$("#m li").each(function(index, item) {
    $(this).prepend("<span class='mnthttl'>" + howmanymonth(item.innerText) + "</span>")
        $(this).css({backgroundPosition: '0px -' + parseInt(item.innerText)*2  + "px"});
});

function howmanymonth(c) {
    var mttl = $("div:contains("+c+")").length -1;
    return (mttl)
}