jQuery Higlight items that are more than one in a list

by nolovelust 13. May 2011 14:16

For a website I needed to highlight items in a list that are more than one. Let me explain with an example. Here is a sample list.

<li id="s0" class="list">
    <div>
    <div class="left">
    <b>(3)</b> <span id="ip0"><b>121.1.18.241</b></span> <img src="/assets/flags/PH.png" alt="*" title="Philippines"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s0','121.1.18.241',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua0" class="small">Mozilla/5.0 (SymbianOS/9.4; U; Series60/5.0 Nokia5800d-1/21.0.025; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413</span>
  </li>

   <li id="s1" class="list darklist">
    <div>
    <div class="left">
    <b>(2)</b> <span id="ip1"><b>115.69.159.213</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s1','115.69.159.213',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua1" class="small">NokiaX2-00/5.0 (04.90) Profile/MIDP-2.1 Configuration/CLDC-1.1</span>
  </li>

   <li id="s2" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip2"><b>115.69.159.213</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s2','115.69.159.213',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua2" class="small">sonyericssonk550i/UC Browser7.6.1.82/70/351</span>
  </li>

   <li id="s3" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip3"><b>115.69.159.213</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s3','115.69.159.213',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua3" class="small">Nokia2700c-2/2.0 (09.95) Profile/MIDP-2.1 Configuration/CLDC-1.1</span>
  </li>

   <li id="s4" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip4"><b>115.246.149.87</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s4','115.246.149.87',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua4" class="small">SAMSUNG-GT-C3303/C3303DDJG4 NetFront/3.5 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
  </li>

   <li id="s5" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip5"><b>114.127.246.46</b></span> <img src="/assets/flags/ID.png" alt="*" title="Indonesia"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s5','114.127.246.46',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua5" class="small">Nokia6680/1.0 (4.04.07) SymbianOS/8.0 Series60/2.6 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
  </li>

   <li id="s6" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip6"><b>114.127.246.39</b></span> <img src="/assets/flags/ID.png" alt="*" title="Indonesia"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s6','114.127.246.39',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua6" class="small">NokiaN70-1/5.0737.3.0.1 Series60/2.8 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
  </li>

   <li id="s7" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip7"><b>114.127.246.100</b></span> <img src="/assets/flags/ID.png" alt="*" title="Indonesia"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s7','114.127.246.100',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua7" class="small">Nokia5310XpressMusic/2.0 (05.81) Profile/MIDP-2.1 Configuration/CLDC-1.1</span>
  </li>

   <li id="s8" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip8"><b>113.210.127.216</b></span> <img src="/assets/flags/MY.png" alt="*" title="Malaysia"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s8','113.210.127.216',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua8" class="small">Mozilla/5.0 (SymbianOS/9.3; Series60/3.2 NokiaE72-1/031.023; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/525 (KHTML, like Gecko) Version/3.0 BrowserNG/7.2.3.1</span>
  </li>

   <li id="s9" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip9"><b>112.205.22.54</b></span> <img src="/assets/flags/PH.png" alt="*" title="Philippines"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s9','112.205.22.54',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua9" class="small">Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaC6-00/10.0.021; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.2.6 3gpp-gba</span>
  </li>

   <li id="s10" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip10"><b>112.198.77.222</b></span> <img src="/assets/flags/PH.png" alt="*" title="Philippines"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s10','112.198.77.222',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua10" class="small">NokiaN73</span>
  </li>

   <li id="s11" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip11"><b>110.227.164.156</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s11','110.227.164.156',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua11" class="small">Mozilla/5.0 (SymbianOS/9.3; Series60/3.2 NokiaC5-00/032.010; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/525 (KHTML, like Gecko) Version/3.0 BrowserNG/7.2.5.2</span>
  </li>

   <li id="s12" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip12"><b>110.225.99.28</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s12','110.225.99.28',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua12" class="small">Mozilla/5.0 (SymbianOS/9.4; U; Series60/5.0 Nokia5800d-1/20.0.012; Profile/MIDP-2.1 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413</span>
  </li>

   <li id="s13" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip13"><b>110.224.223.59</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s13','110.224.223.59',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua13" class="small">LG-GS290/V100 Obigo/WAP2.0 Profile/MIDP-2.1 Configuration/CLDC-1.1 UNTRUSTED/1.0 lg-gs290</span>
  </li>

   <li id="s14" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip14"><b>1.38.14.4</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s14','1.38.14.4',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua14" class="small">SAMSUNG-GT-B5310/B5310DDIK5 SHP/VPP/R5 Dolfin/1.5 Nextreaming SMM-MMS/1.2.0 profile/MIDP-2.1 configuration/CLDC-1.1</span>
  </li>

   <li id="s15" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip15"><b>1.38.14.3</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s15','1.38.14.3',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua15" class="small">SAMSUNG-GT-S5620/S5620DDJC2 SHP/VPP/R5 Dolfin/1.5 Nextreaming SMM-MMS/1.2.0 profile/MIDP-2.1 configuration/CLDC-1.1</span>
  </li>

   <li id="s16" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip16"><b>1.38.14.3</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s16','1.38.14.3',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua16" class="small">NokiaN70-1/5.0638.3.0.1 Series60/2.8 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
  </li>

   <li id="s17" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip17"><b>1.38.14.3</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s17','1.38.14.3',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua17" class="small">Nokia3600slide/2.0 (04.86) Profile/MIDP-2.1 Configuration/CLDC-1.1</span>
  </li>

   <li id="s18" class="list">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip18"><b>1.38.13.4</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s18','1.38.13.4',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua18" class="small">LG-GB270 Obigo/WAP2.0 MIDP-2.0/CLDC-1.1</span>
  </li>

   <li id="s19" class="list darklist">
    <div>
    <div class="left">
    <b>(1)</b> <span id="ip19"><b>1.38.13.3</b></span> <img src="/assets/flags/IN.png" alt="*" title="India"/>
    </div>
    <div class="right" style="text-align:right;"><a href="#" onclick="ipBan('s19','1.38.13.3',true); return false;" class="two">Ban</a></div>
    <div class="clear"></div>
    </div>
    <span id="ua19" class="small">SAMSUNG-GT-S5620/S5620DDJC2 SHP/VPP/R5 Dolfin/1.5 Nextreaming SMM-MMS/1.2.0 profile/MIDP-2.1 configuration/CLDC-1.1</span>
  </li>

</ul>

 

 

In above list IP 1.38.14.3 occurred 3 times and user agent SAMSUNG-GT-S5620/S5620DDJC2 SHP/VPP/R5 Dolfin/1.5 Nextreaming SMM-MMS/1.2.0 profile/MIDP-2.1 configuration/CLDC-1.1

appeared 2 time. I wanted to have them highlighted with different colour so that every occurrence of   IP 1.38.14.3  would have same highlight colour and so on.

After few tries I've ended up with below script. I hope it would help you too.

 

First css

 

.i2
{
    background: #FF0000;
    color: #fff;
}
.i3
{
    background: #660000;
    color: #fff;
}
.i4
{
    background: #5757FF;
}
.i5
{
    background: #336600;
}
.i6
{
    background: #000000;
    color: #fff;
}
.u2
{
    background: #7BCAE1;
}
.u3
{
    background: #B89AFE;
}
.u4
{
    background: #FF00FF;
    color: #fff;
}
.u5
{
    background: #9900FF;
    color: #fff;
}
.u6
{
    background: #0000FF;
    color: #fff;
}

 

Then JavaScript

 

// count function
function countElement(item, array) {
    var count = 0;
    $.each(array, function (i, v) {
        if (v === item) {
            count++;
        }
    });
    return count;
}
$(document).ready(function () {
    // create array from ips in the list
    ipList = [];
    uaList = [];
    $('li.list').each(function (i) {
        var spans = $(this).find('span');
        spans[0] = $(spans[0]);
        spans[1] = $(spans[1]);
        ipList[i] = spans[0].text();
        uaList[i] = spans[1].text();
    });
    // check how many for each ip
    $('li.list').each(function (i) {
        var spans = $(this).find('span');
        spans[0] = $(spans[0]);
        spans[1] = $(spans[1]);
        var ipText = $(spans[0]).text();
        var uaText = $(spans[1]).text();
        var count = countElement(ipText, ipList);
        //if more than one update class of span
        if (count > 1) {
            spans[0].addClass('i' + count);
        }
        var countua = countElement(uaText, uaList);
        //if more than one update class of span
        if (countua > 1) {
            spans[1].addClass('u' + countua);
        }
    });
});

 

 

Tags: , ,

Useful

Permalink | Comments (0)

Tag cloud

Month List