Question

我的目标是对此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

<div id="array"> Blue: 1,Red: 2,Orange: 3, </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);

但是收到错误TypeError: init_arr.sort is not a function我猜init_arr和scorer是对象而不是字符串请帮忙

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();

它需要更多的错误捕获（对于空白值等） - 但它应该给你一般的想法。

javascript - 按照另一个数组的顺序排序数组

3 个答案: