ul中不止一個的jQuery Higlight項目

Question

我正在嘗試使用jQuery突出顯示列表中多個具有不同顏色的項目。 容易實現以下嗎？

例如。 以下面的ul

<ul id="inul">
    <li id="s0" class="list">
        <span id="ip0">127.0.0.1</span>
        <span id="ua0">SonyEricssonK800iv/R1KG Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
    </li>
    <li id="s1" class="list">
        <span id="ip1">127.0.0.1</span>
        <span id="ua1">Nokia3120classic/2.0 (09.41) Profile/MIDP-2.1 Configuration/CLDC-1.1 nokia3120classic/UC Browser7.6.1.82/69/352 UNTRUSTED/1.0</span>
    </li>
    <li id="s2" class="list">
        <span id="ip2">127.0.0.1</span>
        <span id="ua2">SonyEricssonW580i/R8BE Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
    </li>
    <li id="s3" class="list">
        <span id="ip3">127.0.0.1</span>
        <span id="ua3">SonyEricssonK800iv/R1KG Browser/NetFront/3.3 Profile/MIDP-2.0 Configuration/CLDC-1.1</span>
    </li>
    <li id="s4" class="list">
        <span id="ip4">127.0.0.1</span>
        <span id="ua4">Nokia3120classic/2.0 (09.41) Profile/MIDP-2.1 Configuration/CLDC-1.1 nokia3120classic/UC Browser7.6.1.82/69/352 UNTRUSTED/1.0</span>
    </li>
    <li id="s5" class="list">
        <span id="ip5">127.0.0.2</span>
        <span id="ua5">SonyEricssonW580i/R8BE Browser/NetFront/3.3 Profile/MIDP-2.0      Configuration/CLDC-1.1</span>
    </li>
</ul>

每個瀏覽器用戶代理都有兩個，相同的ip（127.0.0.1）和4個相同的ip（127.0.0.1）和1 127.0.0.2。

我希望實現的是，相同的跨度將使用相同的顏色進行着色，同時為每個相同的集合分配不同的顏色。

為了清楚起見，最終結果應如下圖所示

更新在WSkid的幫助下，我努力實現了我想要的。 請參閱更新http://pastebin.ca/2058058或工作版本， 網址為http://jsfiddle.net/mUGVR/15/

Answer 1

下面的代碼效率很高而且很笨拙，但是它可能會帶您開始正確的道路，即存儲類似哈希的地圖並保留數量以添加所需的樣式：

工作提琴http://jsfiddle.net/mUGVR/ 。

var ipList={};
var ipCount=0;
var userList={};
var userCount=0;

$('li.list').each(function(i){
   var spans = $(this).children();
    spans[0] = $(spans[0]);
    spans[1] = $(spans[1]);

    if(ipList[spans[0].text()]!=null)
    {
        spans[0].addClass('ip'+ipList[spans[0].text()]);
    }
    else 
    {
        ipList[spans[0].text()] = ipCount;
        spans[0].addClass('ip'+ipCount);
        ipCount++;
    }

    if(userList[spans[1].text()]!=null)
    {
        spans[1].addClass('user'+userList[spans[1].text()]);
    }
    else 
    {
        userList[spans[1].text()] = userCount;
        spans[1].addClass('user'+userCount);
        userCount++;
    }
});

使用CSS：

.ip0 {background:yellow;}
.user0{background:cyan;}
.user1{background:green;}
.user2{background:red;}

Answer 2

像這樣？ 小提琴： http : //jsfiddle.net/8A5dY/1

// highlights ips
$('li span:first-child').filter(function() {
    return ($(this).text() == '127.0.0.1');
}).css('background', 'yellow');

var colorMap = [];
var currentColor = 0;

$('li span:nth-child(2)').each(function() {
    var text = $(this).text();
    var color = colorMap[text] ||
                ['lightblue', 'red', 'blue', 'green'][currentColor++];

    colorMap[text] = color;

    $(this).css('background', color);
});