在ul中超过一个的jQuery高亮度项

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的帮助下更新了，我已经完成了我想要的东西。请参阅update 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

像这样？Fiddle: 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);
});