javascript - 如何在 jQuery 中对附加的 <li> 项进行排序

Question

我对编程非常陌生，所以请原谅，这可能是一个微不足道的问题，但到目前为止我还没有找到一个令人满意的解决方案来解决我的问题。

在我的 HTML 代码中，我有一个像这样的无序列表。这些列表元素仅用于测试目的。

<ul id="WoodList">
    <li>Banana</li>
    <li>Catv</li>
    <li>Apple</li>
    <li>Orange</li>
    <li>Car</li>
    <li>Pear</li>
    <li>Banana</li>
    <li>Cat2</li>
    <li>Apple4</li>
    <li>Banana1</li>
    <li>Cat</li>
    <li>Apples</li>
    <li>Banana</li>
    <li>Cat</li>
</ul>

我有一个 XML 文件，其中包含树木的简单名称和科学名称，应将其附加到列表中并按字母顺序显示。

var activeLanguage = "de"

function buildList() {
    $.ajax({
        type: "GET",
        url: "xml/wooddata.xml",
        dataType: "xml",
        success: function (data) {
            $(data).find('wood').each(function () {
                var trivialName = $(this).find("name[lang=" + activeLanguage + "]").text();
                var scientificName = $(this).find("scientific_name").text();                
                $("#WoodList").append("<li>" + trivialName + " (" + scientificName + ")</li>");
            });
        }
    });
};

function sortUL(selector) {
    var listItems = selector.children('li').get();
    console.log(listItems);
    $(listItems).sort(function (a, b) {
        var upA = $(a).text().toUpperCase();
        var upB = $(b).text().toUpperCase();
        return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
    }).appendTo(selector);
};

$(document).ready(function () {
    buildList();
    sortUL("#WoodList");
});

请原谅奇怪的缩进，我与 stackoverflow 编辑器发生了一些争执。

如你所见，我有两个功能。从 xml 文件中获取元素并将这些内容附加到 html 列表，如下所示

<li>Spruce (Picea Abies)</li>

下一个函数应该按字母顺序对列表进行排序。而且它在一定程度上发挥了作用。 html 中的所有 test-list-elements 排序完全正确，但附加的 xml-list-items 始终显示在列表末尾而不进行排序。这可能只是一个小错误，你能帮我吗

Answer 1

首先，您需要在 AJAX 请求返回后执行 sortList() 函数:

success: function (data) {
    $(data).find('wood').each(function () {
        var trivialName = $(this).find("name[lang=" + activeLanguage + "]").text();
        var scientificName = $(this).find("scientific_name").text();
        $("#WoodList").append("<li>" + trivialName + " (" + scientificName + ")</li>");
    });
    sortUL("#WoodList");
}

然后你可以优化排序功能，如下所示:

function sortUL(selector) {
    var $ul = $(selector);
    $ul.find('li').sort(function (a, b) {
        var upA = $(a).text().toUpperCase();
        var upB = $(b).text().toUpperCase();
        return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
    }).appendTo(selector);
};

Example fiddle