2

我有两个数组。

我想要一个包含每个数组项颜色编码的跨度的 div

  • array1 中的内容为红色，
  • array2 中的内容为蓝色
  • 两者中的内容都是淡紫色的

问题我如何快速从独特到合并，如预期的输出？我不介意使用 diff 对 div 进行后期处理，只要它很快。

注意：真实数组的内容不包含任何类名，因此使用该内容的解决方案不是我想要的。我正在考虑在差异之后进行某种比较，或者希望使用过滤器/映射更聪明的东西

到目前为止的进展（jsfiddle）

var red = ["01-red", "11-red", "01-in-both", "03-red", "02-in-both"];
var blue = ["10-blue","01-in-both","04-blue","02-in-both","02-blue"];
var both = red.concat(blue);

var unique = $.unique(both.slice(0)); // copy since unique destroys source
unique.sort();

$.each(unique,function(_,item) {
    $("#res").append($('<span>').html(item)).append('<br>');
});

$.each(red,function(_,item) {
    $("#res1").append($('<span class="red">').html(item)).append('<br>');
});

$.each(blue,function(_,item) {
    $("#res1").append($('<span class="blue">').html(item)).append('<br>');
});

预期输出为

<div>
  <span class="purple">01-in-both</span><br>
  <span class="red"   >01-red</span><br>
  <span class="blue"  >02-blue</span><br>
  <span class="purple">02-in-both</span><br>
  <span class="red"   >03-red</span><br>
  <span class="blue"  >04-blue</span><br>
  <span class="blue"  >10-blue</span><br>
  <span class="red "  >11-red</span><br>
</div>
4

1 回答 1

1

更新

由于您的数组不包含实际的类名，您可以执行以下操作。

//create a new array of objects which contain the assigned class name for the items
var redObject = $.map(red, function(v) { return { class:blue.indexOf(v)>=0?'purple':'red', value: v };});
var blueObject = $.map(blue, function(v) { return { class:red.indexOf(v)>=0?'purple':'blue', value: v };});
var both = redObject.concat(blueObject);
//sort array on value
both.sort(function(o1,o2) {
    return o1.value == o2.value ? 0 : (o1.value > o2.value) ? 1 : -1;
});

//remove duplicatesd values.
for(var i = both.length-1; i > 0; i--) {
    if(both[i].value == both[i-1].value) {
        both.splice(i,1);
    }
}
//print the value and add the class.
$.each(both,function(_,item) {
   $("#res").append($('<span>').addClass(item.class).html(item.value)).append('<br>');
});

这是生成的JSFiddle。

于 2013-10-11T13:13:45.423 回答