Count totals in group by text match in div list

Iterate a set of tags, look for text matches and count the totals. Place those totals next to the div as an indicator with CSS3. ~ Andrew Pougher

by Andrew Pougher

HTML

<h3>Number in group</h3><hr>
<div id="mytable">
       <div>BA10</div>
     <div>BA10</div>
     <div>BA10</div>
     <div>FR4</div>
     <div>x11234</div>
         <div>VS12</div>
         <div>VS12</div>
</div><hr>

<div id="result"></div>

CSS

body{padding:30px;}

#mytable span{
    font-size:10px;
    background:#cc1100;
height: 12px;
    text-align:center;
width: 12px;
    float:left;
    margin-right:5px;
    border:2px solid #fff;
    color:#fff;
    display:block;
    position:relative;
    top:-2px;
-moz-border-radius: 35px;
border-radius: 35px;
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .4);
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .4);
}

JavaScript

var count
$('#mytable div').each(function(index, x) {
    cc = $(this);
    count = ($('div >:contains(' + x.innerText + ')').length);
$(cc).prepend("<span>" + count + "</span>")
    });

// A quick method without 
var dd = $('#mytable').text().match(/BA10/g).length
$('#result').text(dd)