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

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 中的所有测试列表元素都完全正确排序，但附加的 xml 列表项始终显示在列表末尾而没有排序。这可能只是一个小错误，你能帮帮我吗

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