Question

我有两个阵列。

我想要一个带有跨度的div，其中包含每个颜色编码的数组项

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

问题如何从预期输出中快速地从唯一到合并？我不介意使用diff来处理div，例如只要它很快。

注意： 真实数组的内容不包含任何类名，因此使用内容的解决方案不是我要找的内容。我想在使用filter / map

之后的差异或希望更聪明的东西之后进行某种比较

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>

Answer 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。

排序，合并和独特的阵列，同时保留它们的来源

1 个答案: