Javascript 对二维数组中的动态列表进行排序

我对Javascript和jQuery有点陌生，但我将尝试解释我的问题。我制作了一个简单的页面，其中有一个文本字段（电影名称）和一个下拉列表（移动等级1-5）。当用户单击“添加电影”按钮时，这些值将被放入一个数组中，该数组被推送到另一个数组中，因此该数组的外观如下：

[[grade，“moviename”]]

。然后我动态创建：

“moviename”“grade”

，moviename和grade作为列表元素显示在页面上。这很好，但现在我想有两个按钮，按最高和最低等级对li元素列表进行排序

[
    [
        5,
        ”movie name1”
    ],
    [
        3,
        ”movie name2”
    ],
    [
        1,
        ”movie name3”
    ],
    [
        2,
        ”movie name4”
    ]
] 

如果列表如上图所示，例如，如果按“按最低排序”，我希望列表如下所示：

[
    [
        1,
        ”movie name3”
    ],
    [
        2,
        ”movie name4”
    ],
    [
        3,
        ”movie name2”
    ],
    [
        5,
        ”movie name1”
    ]
]

我尝试创建一个函数，对数组进行排序，然后删除当前的li元素，然后打印出新的列表，但是所有的值都只进入一个列表元素。如何获取数组的单独值，然后将每个值打印为列表元素？或者，如果可能的话，直接对列表排序而不删除它？我要做的是按照列表元素中span元素中显示的数字对列表进行排序。有人知道怎么做吗

var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();
button_high.click(function() 
{
    $("#filmerna ul li").remove();
    betyg_array.sort(function(a,b){return b-a});
    var film = betyg_array;
    var grade = betyg_array;
    var element = '<li class="lista">' + film + '<span class="betyg">'+ grade +'</span></li>';
    film_list.append(element);

按钮高。单击（函数（） {

$list=$（“#filmerna ul”）；
$（“filmerna ul li”）.remove（）；
排序（函数（x，y）{返回y[1]-x[1]}）；
$.each（betyg_数组，函数（）{
$nyFilm=$（“
”）；
$nyFilm.attr（“类”、“列表”）
$nyFilm.text（$（this）[0]）；
$nyBetyg=$（“”）；
$nyBetyg.attr（“类”、“betyg”）；
$nyBetyg.text（$（本）[1]）；
$nyBetyg.appendo（$nyFilm）；
$nyFilm.appendTo（$list）；
});

---

}))

好吧，根据你原来的JS，我想这应该可以帮你

var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();
button_high.click(function() {
    $list = $("#filmerna ul");
    $list.empty();

    betyg_array.sort(function(a,b){return b-a});

    $.each(betyg_array, function() {
        $newMovie = $("<li />");
        $newMovie.attr("class", "lista")
        $newMovie.text($(this)[1]);

        $newGrade = $("<span />");
        $newGrade.attr("class", "betyg");
        $newGrade.text(new Array($(this)[0] + 1).join('*'));

        $newGrade.appendTo($newMovie);
        $newMovie.appendTo($list);
    });
});

var按钮_high=$（'#high'）；
var按钮_low=$（'#low'）；
var betyg_数组=新数组（）；
按钮高。单击（函数（）{
$list=$（“#filmerna ul”）；
$list.empty（）；
sort（函数（a，b）{返回b-a}）；
$.each（betyg_数组，函数（）{
$newMovie=$（“
”）；
$newMovie.attr（“类”、“列表”）
$newMovie.text（$（this）[1]）；
$newGrade=$（“”）；
$newGrade.attr（“类”、“betyg”）；
$newGrade.text（新数组（$（this）[0]+1）.join（'*'）；
$newGrade.appendTo（$newMovie）；
$newMovie.appendTo（$list）；
});
});

---

有更简洁的方法来添加那些

元素，但我想确保它是清晰的。

请发布您尝试创建的函数的代码：我知道如何对数组进行排序，但不是从中获取特定值并附加到每个列表元素…好的。我误解了这个问题。在这种情况下，纳里尔是对的。我们真的需要看看你的HTML代码才能给你一个好的答案。HTML真的什么都不是，每次你按下“添加电影”按钮时都会创建列表元素，然后在页面上显示输入了电影名称和等级的列表元素。。。相关的html只是一个emty

，当用户按下“添加电影”时，我通过javascript填充列表元素好的，看到你的JS代码，我想我对你正在处理的事情有一个更好的理想。给我一点时间更新我的答案。这样就没有办法按原样对列表进行排序了？不删除它，然后再附加它？

    $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);
});

var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();
button_high.click(function() {
    $list = $("#filmerna ul");
    $list.empty();

    betyg_array.sort(function(a,b){return b-a});

    $.each(betyg_array, function() {
        $newMovie = $("<li />");
        $newMovie.attr("class", "lista")
        $newMovie.text($(this)[1]);

        $newGrade = $("<span />");
        $newGrade.attr("class", "betyg");
        $newGrade.text(new Array($(this)[0] + 1).join('*'));

        $newGrade.appendTo($newMovie);
        $newMovie.appendTo($list);
    });
});