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

Question

我有这个代码：

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);

}

这是我的聊天应用程序中的用户列表，用户拥有 value.pawn 附带的不同 pawn，我使用此类创建了 css，例如 userlist_pawnADMIN （橙色 pawn 图像）、userlist_pawnMODERATOR （白色 pawn 图像）、userlist_pawnMEMBER （蓝色 pawn 图像）、ADMIN 、 MODERATOR 和 MEMBER 是 value.pawn 中的值，具体取决于用户的等级，我想将 ADMIN 放在列表中的第 1 位，MODERATOR 放在第 2 位，MEMBER 分别放在第 3 位，位于他们按照聊天中的连接顺序出现的那一刻。

HTML：

<ul id="userlist">

                </ul>

Answer 1

你能试试这个吗？let order = ['ADMIN', 'MODERATOR', 'MEMBER'];&nbsp; &nbsp; order.forEach(function(orderItem) {&nbsp; &nbsp; &nbsp; &nbsp; users.forEach(function(value, key, map) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (orderItem === value.pawn) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; userlistHTML += '<li><div class="userlist_pawn'+ value.pawn +'"></div><divclass="userlist_name">' + value.name + '</div></li>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; })

Answer 2

这就是我所指的 - 获取用户列表/按角色对其进行排序/迭代以获取字符串/用字符串替换innerHTML。请注意，我使用对象文字来确定用户角色的相对顺序- 因为所需的结果不是直接按字母顺序排列的。这用于通过引用相关用户角色的值来确定用户的排序顺序（而不是简单地按字母顺序对数组进行排序）。也不是用于排序的一个衬里 - 这可以分成一个单独的命名函数，因为另一个函数需要它（并且排序顺序也可以修改，以便它对不同的用户显示不同的内容。我还使用了 li 上的类 - 并用它来给出分组之间的间距。const users = [&nbsp;{name: 'Arthur' , role: "Member"},&nbsp;{name: 'Susan' , role: "Moderator"},&nbsp;{name: 'Bob' , role: "Admin"},&nbsp;{name: 'Sylvia' , role: "Member"},&nbsp;{name: 'Gavin' , role: "Moderator"},&nbsp;{name: 'Stuart' , role: "Admin"}&nbsp; &nbsp;]const roleOrder = {&nbsp; Admin: 1,&nbsp; Moderator: 2,&nbsp; Member: 3};function Userlist(users) {&nbsp; const id = "#userlist";&nbsp; let userlistHTML ='';&nbsp; const sortedUsers =&nbsp; users.sort(function(a, b){ return roleOrder[a.role] == roleOrder[b.role] ? 0 : +(roleOrder[a.role] > roleOrder[b.role]) || -1;});&nbsp;&nbsp;&nbsp; sortedUsers.forEach(function(user) {&nbsp; &nbsp;userlistHTML += '<li class="userlist_pawn'+ user.role +'"><span class="userlist_name">' + user.name + ' (' + user.role + ')</span></li>';&nbsp; });&nbsp; $(id).html(userlistHTML);}Userlist(users);// gives the list in the order of admin > moderator > member// Bob (admin)// Stuart (admin)// Susan (moderator)// Gavin (moderator)// Arthur (member)// Sylvia (member)ul {&nbsp; list-style: none;&nbsp; padding-left: 0;&nbsp; }.userlist_pawnAdmin {&nbsp; color: red;}.userlist_pawnModerator {&nbsp; color: blue;}.userlist_pawnMember {&nbsp; color: green;}.userlist_pawnAdmin + .userlist_pawnModerator,.userlist_pawnModerator + .userlist_pawnMember {&nbsp; margin-top: 16px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul id = "userlist"></ul>