jQuery 突出显示 ul 中不止一个的项目

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>

每个浏览器有两个用户代理和4个相同的ip（127.0.0.1）和1个127.0.0.2。

我希望实现的是相同的跨度将用相同的颜色着色，同时为每个相同的集合分配不同的颜色。

为了清楚起见，最终结果应该如下图所示

更新 在 Wskid 的帮助下，我已经实现了我想要的。查看更新http://pastebin.ca/2058058 或http://jsfiddle.net/mUGVR/15/ 的工作版本

Answer 1

以下内容非常高效和 hacky，但它可能会让您走上正确的道路，即存储类似哈希的地图并保持计数以添加所需的样式：

工作小提琴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);
});