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

每次添加新的li标签后，您需要执行排序功能

Answer 2

您应该在< li >内附加success : function(){}之后对列表进行排序。

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>");
                });
                sortUL("#WoodList");  // Call it here.
            }
        });
    };


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

});

sortUL中的

$(document).ready()不会对附加元素进行排序，因为AJAX调用需要一些时间来执行，在执行之前将调用sortUL。

Answer 3

首先，您需要在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

如何在jQuery中对Appended <li> -items进行排序</li>

3 个答案: