Question

我是Javascript和jQuery的新手，但我会尝试解释我的问题。我做了一个简单的页面，其中包含一个文本字段（电影名称）和一个dropown（等级为1-5）。当用户单击“添加电影”按钮时，这些值将被放入一个数组中，该数组被推送到另一个数组，以便数组如下所示：[[grade, "moviename"]]。然后我动态创建：<li> "moviename" <span> "grade" </span> </li>，并将movienamne和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);

但是它当然会导致整个数组进入一个列表元素我希望特定的值到一个特定的列表元素，并让它按照span元素中的数字排序......

    var button_high = $('#high');
var button_low = $('#low');
var betyg_array = new Array();

button_high.click（（）的函数 {

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

}）;

Answer 1

好的，基于您原来的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);
    });
});

有更简洁的方式来添加这些<li>元素，但我想确保它很清楚。

从二维数组中排序动态列表

1 个答案: