如何在javascript中按类名对div循环排序

我有以下代码：

function Userlist(users) {
var id = "#userlist";

$(id).empty();

users.forEach(function(value, key, map) {

userlistHTML += '<li><div class="userlist_pawn'+ value.pawn +'"></div><divclass="userlist_name">' + value.name + '</div></li>';

}


});

    $(id).html(userlistHTML);
}

函数用户列表（用户）{
var id=“#用户列表”；
$（id）.empty（）；
users.forEach（函数（值、键、映射）{
userlistHTML+='
'+value.name+'
'；
}
});
$（id）.html（userlistHTML）；
}

这是我聊天应用程序中的一个用户列表，用户有不同的典当值。典当，我用这个类制作了css，比如userlist_pawnADMIN（橙色典当图像），userlist_pawnMODERATOR（白色典当图像），userlist_pawnMEMBER（蓝色典当图像），ADMIN，版主和成员是value.pawn中的值，具体取决于用户的排名，我想按如下顺序排列：管理员排在列表的第一位，版主排在第二位，成员排在第三位，此时他们以连接顺序出现在聊天室中

HTML:

你能试试这个吗

let order = ['ADMIN', 'MODERATOR', 'MEMBER'];

    order.forEach(function(orderItem) {
        users.forEach(function(value, key, map) {
            if (orderItem === value.pawn) {
                userlistHTML += '<li><div class="userlist_pawn'+ value.pawn +'"></div><divclass="userlist_name">' + value.name + '</div></li>';
            } 

        })
    })

let order=['ADMIN'、'版主'、'成员']；
order.forEach（函数（orderItem）{
users.forEach（函数（值、键、映射）{
if（orderItem==value.pawn）{
userlistHTML+='
'+value.name+'
'；
} 
})
})

这就是我所指的- 获取用户列表/按角色排序/迭代获取字符串/用字符串替换innerHTML

请注意，我使用了一个对象文字来确定用户角色的相对顺序——因为期望的结果不是直接字母逻辑的。这用于通过引用相关用户角色的值来确定用户的排序顺序（而不是简单地对数组进行排序）

也不是用于排序的一个行程序-这可以拆分为一个单独的命名函数，它是另一个函数所需要的（并且sor顺序也应该修改，以便不同的用户可以不同地显示它）

我还使用了li's上的类，并用它来给出分组之间的间距

const用户=[
{姓名：“亚瑟”，角色：“成员”}，
{姓名：“苏珊”，角色：“主持人”}，
{name:'Bob'，role:'Admin}，
{名称：'Sylvia'，角色：'Member}，
{姓名：'加文'，角色：'主持人'}，
{名称：“斯图尔特”，角色：“管理员”}
]
常量roleOrder={
行政:1,，
主持人:2,，
成员：3
};
函数用户列表（用户）{
const id=“#userlist”；
让userlistHTML=''；
const sortedUsers=users.sort（函数（a，b）{return roleOrder[a.role]==roleOrder[b.role]？0:+（roleOrder[a.role]>roleOrder[b.role]）| |-1；}）；
分拣机forEach（功能（用户）{
userlistHTML+='
'+user.name+'（'+user.role+'）
'；
});
$（id）.html（userlistHTML）；
}
用户列表（用户）；
//按管理员>版主>成员的顺序提供列表
//鲍勃（行政）
//斯图尔特（行政）
//苏珊（主持人）
//加文（主持人）
//阿瑟（成员）
//西尔维亚（成员）

ul{
列表样式：无；
左侧填充：0；
}
.userlist\u pawnAdmin{
颜色：红色；
}
.userlist\u pawnModerator{
颜色：蓝色；
}
.userlist\u pawnMember{
颜色：绿色；
}
.userlist\u pawnAdmin+.userlist\u pawnModerator，
.userlist\u pawnModerator+.userlist\u pawnMember{
边缘顶部：16px；
}

您只需使用每个用户的角色对用户数组进行排序（在迭代之前）-这样所有使用AFMIN的用户都会被排序为数组的开头，然后所有用户都会使用版主，然后所有用户都会使用memeber。然后数组的迭代自然会提供相同的顺序。同样-不必在迭代之前（在空（）之后）设置userlistHTML=“”-目前您正在添加一个不存在的stricg。您甚至不需要空的（）-您正在完全替换.html（）结尾处的innerHTML）这是否回答了您的问题？@gavgrif您能帮我更清楚一些吗？@Su1raM-下面提供的解决方案-希望这有帮助：）

let order = ['ADMIN', 'MODERATOR', 'MEMBER'];

    order.forEach(function(orderItem) {
        users.forEach(function(value, key, map) {
            if (orderItem === value.pawn) {
                userlistHTML += '<li><div class="userlist_pawn'+ value.pawn +'"></div><divclass="userlist_name">' + value.name + '</div></li>';
            } 

        })
    })