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）和1个127.0.0.2有4个。

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

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

enter image description here

更新在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);
});

jQuery突出显示ul中多于一个的项目

2 个答案: