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);
});