如何按降序对div数据进行排序

Question

我有一个div，用于显示特定颜色的百分比。我想按降序对div百分比进行排序。如何进行？ 下面是我的代码

function displayLegend() {
   for (var key in colorVariable1) {
      let percentage = (countVariable1[key] / totalPCICount) * 100; 
      if(percentage) {
          percentage = percentage.toFixed(2);
      }
      var line = document.createElement("div");
      line.innerHTML = '<span class="box"  style=" background: ' + colorVariable1[key] + ';"></span><span>' + key + '(' + percentage + '%)</span>';
      document.getElementById("legendInfo").appendChild(line);
   }
}              

下面是图片。我要对百分比部分进行排序。

---

Answer 1

您可能需要首先以结构化形式存储数据，以便对其进行排序。

我已重新编写您的示例以显示我的想法-未经测试。

var values = []; // holder for rows

for (var key in colorVariable1) {
    let percentage = (countVariable1[key] / totalPCICount) * 100; 
    if(percentage) {
        percentage = percentage.toFixed(2);
    } else {
        percentage = 0;
    }

    // row definition
    let entry = {
        value: percentage,
        html: '<span class="box"  style=" background: ' + colorVariable1[key] + ';"></span><span>' + key + '(' + percentage + '%)</span>';
    }

    values.push(entry); // add row to holder
 }

// sort rows in holder by value (percentage)
// see: https://stackoverflow.com/questions/979256/sorting-an-array-of-objects-by-property-values
values.sort(function(a, b) {
    return parseFloat(b.value) - parseFloat(a.value);
});

// add sorted lines
for(var i in values){
    var line = document.createElement("div");
    line.innerHTML = values[i].html;
    document.getElementById("legendInfo").appendChild(line);    
}

Answer 2

尝试一下。

// Assummed sample data
var colorVariable1 = {302:"red", 156:"green", 89:"blue", 176:"orange"};
var countVariable1 = {302:30, 156:56, 89:71, 176:89};
var totalPCICount = 75;

function displayLegend() {

    var percentages = {};
    for (var key in colorVariable1) {
        let percentage = (countVariable1[key] / totalPCICount) * 100;
        percentages[key] = percentage.toFixed(2);
    }
    var sorted = Object.keys(percentages)
        .sort(function(a, b) {
            return (+percentages[a]) - (+percentages[b])
        });
    for (var key of sorted) {
        var line = document.createElement("div");
        line.innerHTML = '<span class="box" style="background-color:' + colorVariable1[key] +
            ';"></span><span>' + key + '(' + percentages[key] + '%)</span>';
        document.getElementById("legendInfo").appendChild(line);
    }
}

.box {
  width: 5px;
  height: 5px;
  padding: 5px;
}

<button onclick="displayLegend()">click</button>
  <div id="legendInfo"></div>