javascriptの - 別の配列の順序でソートする配列

Question

私の目標は、だから私の募集結果はこの

ような結果を取得することである。このため

<div id="array"> Blue: 1,Red: 2,Orange: 3, </div> 

で、これは別のdivによって

<div id="myDiv">3xOrange;2xBlue;1xRed;1xRed;1xRed;1xOrange;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xOrange;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;20xBlue;33xRed;20xBlue;33xRed;2xBlue;3xRed;51xBlue;51xRed;</div> 

をDIVソートすることです

2xBlue;1xBlue;1xBlue;2xBlue;3xRed;3xRed;1xRed;1xRed;2xOrange;3xOrange ...... 

私は最初のdivがこのような文字列分割を使用する必要があることを認識しています.split('x')[1];

これまでのところ、私はこのコードを持っている：

var init_arr; 
var scorer; 

window.onload=function() { 
    scorer=document.getElementById("array").innerHTML; 
    init_arr = document.getElementById("myDiv").innerHTML; 

var final_arr = init_arr.sort(function(a,b) { 
    return scorer[a]-scorer[b]; 
}); 
} 
alert(final_arr); 

が、私は init_arrと得点王は、オブジェクトが文字列ではありません推測エラーTypeError: init_arr.sort is not a functionを取得することは

Answer 1

を助けてください、この答えは;または,で文字列の残りの部分を削除しますarrayをJSON文字列の一部のように扱い、xの後の部分でソートします。

window.onload = function() { 
 
    var init_arr = document.getElementById("myDiv").innerHTML.split(';'), 
 
     scorer = JSON.parse('{' + document.getElementById("array").innerHTML + '}'); 
 

 
    init_arr.sort(function(a, b) { 
 
     var aa = a.split('x')[1], 
 
      bb = b.split('x')[1]; 
 
     return scorer[aa] - scorer[bb]; 
 
    }); 
 
    alert(init_arr); 
 
};

<div id="myDiv">3xOrange;2xBlue;1xRed;1xRed;1xRed;1xOrange;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xOrange;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;20xBlue;33xRed;20xBlue;33xRed;2xBlue;3xRed;51xBlue;51xRed</div> 
 
<div id="array">"Blue": 1,"Red": 2,"Orange": 3</div>

しかし、私は本当に順番を並べ替えるため、実際のデータのための配列やオブジェクトを使用することをお勧め。 HTMLコードの一部ではありません。

Answer 2

まあ、最初の答えを見た後にあなたを助けるために遊んだ後、私はダミーを感じましたが、ここでそれは行きます。

<div id="myDiv">3xOrange;2xBlue;1xRed;1xRed;1xRed;1xOrange;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;2xOrange;3xRed;1xBlue;1xRed;2xBlue;3xRed;1xBlue;1xRed;20xBlue;33xRed;20xBlue;33xRed;2xBlue;3xRed;51xBlue;51xRed;</div> 

<div id="array"></div> 

var init; 
var final; 
var scorer; 

scorer = document.getElementById("array"); 
init = document.getElementById("myDiv"); 

init = init.textContent.split(/\;/); 
init = init.filter(function(item) { 
    return item.length > 0; 
}) 
.map(function(item) { 
    item = item.split(/x/); 
    var obj = { 
    color: item[1], 
    amount: parseInt(item[0]) 
    } 
    return obj; 
}); 

final = init.reduce(function(scored, item) { 
    if(scored[item.color] === undefined) { 
    scored[item.color] = 0; 
    } 
    scored[item.color] += item.amount; 
    return scored; 
}, {}); 

final = Object.keys(final) 
    .sort(function(item1, item2) { 
     return final[item1].amount - final[item2].amount; 
    }) 
    .map(function(key) { 
    return key + ' :' + final[key]; 
    }); 
scorer.textContent = final.join(', '); 

少なくともこれがあなたができるものの一種であるマップ、フィルタ、削減、ソート

Answer 3

で遊ぶのがおかしかった：

function sort() { 
    var scorer; 
    var scorerLookup; 
    var sortedLookup; 

    //First we figure out the sort order 
    scorer = document.getElementById("array").innerHTML.split(','); 
    scorer.sort(function(a, b) { 
    aVal = parseInt(a.split(':')[1].trim()); 
    bVal = parseInt(b.split(':')[1].trim()); 

    return aVal - bVal; 
    }); 
    console.log(scorer); 

    //Now put the sort order into an object so we can easily lookup values 
    scorerLookup = {}; 
    for (var i = 0; i < scorer.length; i++) { 
    var tempVal = scorer[i].split(':'); 
    scorerLookup[tempVal[0].trim()] = parseInt(tempVal[1].trim()); 
    } 
    console.log(scorerLookup); 

    //Now sort the main list 
    init_arr = document.getElementById("myDiv").innerHTML.split(';'); 
    init_arr.sort(function(a, b) { 
    aVal = scorerLookup[a.split('x')[1]]; 
    bVal = scorerLookup[b.split('x')[1]]; 

    return aVal - bVal; 
    }); 
    console.log(init_arr); 
} 

window.onload=sort(); 

それは本当にトラップより多くのエラーを必要とします（空白値など） - しかし、それはあなたに一般的なアイデアを与える必要があります。