排序，合併和獨特的陣列，同時保留它們來自哪裏

Question

我有兩個數組。

我想用含有每個數組項顏色編碼，以便從ARRAY1

• 含量爲紅色跨度一個div，從數組2
• 含量爲藍色
• 內容是在兩個是紫紅色

問題如何快速從獨特到合併，如預期輸出？ 我不介意後處理div使用比較例如只要它很快。

注：的真正數組的內容將不包含任何類的名稱，以便使用內容的解決方案是不是我所期待的。我想到的是某種比較的差異或希望更聰明的東西帶過濾器/圖後

Progress so far (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> 

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。