Count up Duplicates in list, hide dupes and show number ~ Andrew Pougher
Count up Duplicates in list, hide dupes but show totals. Using JQuery . I am using this to extract data and place into a chart. It could be very useful with Flot or such like.~ Andrew Pougher
by Andrew Pougher
June 15, 2012
HTML
<ul id="myid">
<li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>pougher</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>pougher</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>Samsung</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li>
<li>apple</li>
<li>ibm</li>
<li>apple</li> <li>microsoft</li>
<li>ibm</li>
<li>microsoft</li>
<li>apple</li> ...
CSS
.mnthttl{
font:11px arial;
background:blue;
height: 15px;
text-align:center;
width: 15px;
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);
}
JavaScript
var liText = '', liList = $('#myid li'), listForRemove = [];
$(liList).each(function () {
var text = $(this).text();
if (liText.indexOf('|'+ text + '|') == -1)
liText += '|'+ text + '|';
else
listForRemove.push($(this));
});
$(listForRemove).each(function () { $(this).hide(); });
$("#myid 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 = $("li:contains("+c+")").length ;
return (mttl)
}