Ajax请求后按文本内容对div元素排序的问题求助

嗨，我明白你遇到的问题了——你现在的排序代码执行时机不对，所以根本没作用到那些动态加载的.person元素上。

问题根源 #

你写的排序代码放在了$(function(){...})里，这个函数是DOM初始加载完成后就立即执行的，但你的人员数据是通过Ajax异步获取的，这时候loadData函数还没把.person元素渲染到页面上，所以$(".person")找不到任何元素，排序自然没效果。

解决方案：在数据渲染完成后再执行排序 #

我们只需要把排序逻辑移到loadData函数的末尾，也就是把.person元素添加到DOM之后再执行排序。另外，直接用textContent可能会包含额外的文本（比如角色信息），最好精准提取姓名来排序，同时转成小写避免大小写干扰排序结果。

修改后的people.js代码如下：

$(document).ready(function () {
    console.log("READY");
    //execute ajax call
    $.ajax({
        method: "GET",
        dataType: "json",
        url: "../assets/db/people.json",
        success: function (response) {
            console.log(response); //log response
            loadData(response); //load the response date in html
        },
        error: function (request, error) {
            console.log(request, error);
        }
    });
});

function loadData(json) {
    console.log(json);
    var el = "";
    //for each person create a div
    for (var i = 0; i < json.people.length; i++) {
        console.log(json.people[i].id);
        //create div element
        el += '<div class="person"><a href="./person.html?id='+json.people[i].id+'" class="card"><div class="thumb" style="background-image: url('+json.people[i].image+');"></div><article><h6>'+json.people[i].firstname+' '+json.people[i].lastname+'</h6><span style="text-align: right">'+json.people[i].role+'</span></article></a></div>';
    }
    $(".people").append(el); //append person to people

    // 数据渲染完成后执行排序
    $(".person").sort(function(a, b) {
        // 提取每个人员的姓名文本（h6标签内容），转小写消除大小写影响
        var nameA = $(a).find('h6').text().trim().toLowerCase();
        var nameB = $(b).find('h6').text().trim().toLowerCase();
        // 使用localeCompare更简洁地处理字符串排序
        return nameA.localeCompare(nameB);
    }).appendTo(".people");
}

额外优化：封装排序函数（可选） #

如果之后需要多次调用排序逻辑，可以把排序代码封装成单独的函数，让代码更清晰：

// 封装排序函数
function sortPeopleAlphabetically() {
    $(".person").sort(function(a, b) {
        var nameA = $(a).find('h6').text().trim().toLowerCase();
        var nameB = $(b).find('h6').text().trim().toLowerCase();
        return nameA.localeCompare(nameB);
    }).appendTo(".people");
}

function loadData(json) {
    // ... 原有的渲染代码 ...
    $(".people").append(el);
    // 调用排序函数
    sortPeopleAlphabetically();
}

这样修改后，当Ajax请求完成并把所有人员卡片渲染到页面后，就会立即按姓名的字母顺序重新排列这些.person元素了。

内容的提问来源于stack exchange，提问作者Roberto Bigazzi