javascript - 排序打乱了nr的变化

Question

我对 Javascript 列表的排序有疑问。填充文本区域并选择评分时创建的列表。它看起来像这样：

var element = '<li class="lista">' + filmen + '<span class="betyg">' + changeNumber(grade) + '</span></li>';
film_list.append(element);

我还有一个函数可以将 span 元素中的数字转换为星星，它看起来像这样：

function changeNumber(number) {
  var stars = "";
  for(var i = 0; i < number; i++) {
    stars += "*";
  }
  return stars;
}

问题是有两个按钮可以对列表进行排序，高低取决于等级，当我按下按钮时，列表排序正确。然而，星星消失了，数字又出现了。我试图changeNumber从排序按钮调用该函数，但它似乎不起作用。我不确定我应该使用什么作为论据。关于我应该做什么的任何建议？

排序函数如下所示：

var button_high = $('#high');
var betyg_array = new Array();
button_high.click(function () {
  $list = $("#filmerna ul");
  $("#filmerna ul li")
    .remove();
  betyg_array.sort(function (x, y) {
    return y[1] - x[1]
  });
  $.each(betyg_array, function () {
    $nyFilm = $("<li />");
    $nyFilm.attr("class", "lista")
    $nyFilm.text($(this)[0]);
    $nyBetyg = $("<span />");
    $nyBetyg.attr("class", "betyg");
    $nyBetyg.text($(this)[1]);    
    $nyBetyg.appendTo($nyFilm);
    $nyFilm.appendTo($list);
    changeNumber();
  });
});

Answer 1

var button_high = $('#high');
var betyg_array = new Array();
button_high.click(function () {
  $list = $("#filmerna ul");
  $("#filmerna ul li")
    .remove();
  betyg_array.sort(function (x, y) {
    return y[1] - x[1]
  });
  $.each(betyg_array, function () {
    $nyFilm = $("<li />");
    $nyFilm.attr("class", "lista")
    $nyFilm.text($(this)[0]);
    $nyBetyg = $("<span />");
    $nyBetyg.attr("class", "betyg");
    $nyBetyg.text($(this)[1]);
    var stars = $nyBetyg.text(betyg_array); //this line and the line below was the solution
    $nyBetyg.text(changeNumber(stars)); 

    $nyBetyg.appendTo($nyFilm);
    $nyFilm.appendTo($list);
  });
});