我有這個代碼：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);}這是我的聊天應(yīng)用程序中的用戶列表，用戶擁有 value.pawn 附帶的不同 pawn，我使用此類創(chuàng)建了 css，例如 userlist_pawnADMIN （橙色 pawn 圖像）、userlist_pawnMODERATOR （白色 pawn 圖像）、userlist_pawnMEMBER （藍色 pawn 圖像）、ADMIN 、 MODERATOR 和 MEMBER 是 value.pawn 中的值，具體取決于用戶的等級，我想將 ADMIN 放在列表中的第 1 位，MODERATOR 放在第 2 位，MEMBER 分別放在第 3 位，位于他們按照聊天中的連接順序出現(xiàn)的那一刻。HTML：<ul id="userlist"> </ul>
2 回答
紫衣仙女
TA貢獻1839條經(jīng)驗 獲得超15個贊
你能試試這個嗎？
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>';
}
})
})
守候你守候我
TA貢獻1802條經(jīng)驗 獲得超10個贊
這就是我所指的 - 獲取用戶列表/按角色對其進行排序/迭代以獲取字符串/用字符串替換innerHTML。
請注意，我使用對象文字來確定用戶角色的相對順序- 因為所需的結(jié)果不是直接按字母順序排列的。這用于通過引用相關(guān)用戶角色的值來確定用戶的排序順序（而不是簡單地按字母順序?qū)?shù)組進行排序）。
也不是用于排序的一個襯里 - 這可以分成一個單獨的命名函數(shù)，因為另一個函數(shù)需要它（并且排序順序也可以修改，以便它對不同的用戶顯示不同的內(nèi)容。
我還使用了 li 上的類 - 并用它來給出分組之間的間距。
const users = [
{name: 'Arthur' , role: "Member"},
{name: 'Susan' , role: "Moderator"},
{name: 'Bob' , role: "Admin"},
{name: 'Sylvia' , role: "Member"},
{name: 'Gavin' , role: "Moderator"},
{name: 'Stuart' , role: "Admin"}
]
const roleOrder = {
Admin: 1,
Moderator: 2,
Member: 3
};
function Userlist(users) {
const id = "#userlist";
let userlistHTML ='';
const sortedUsers = users.sort(function(a, b){ return roleOrder[a.role] == roleOrder[b.role] ? 0 : +(roleOrder[a.role] > roleOrder[b.role]) || -1;});
sortedUsers.forEach(function(user) {
userlistHTML += '<li class="userlist_pawn'+ user.role +'"><span class="userlist_name">' + user.name + ' (' + user.role + ')</span></li>';
});
$(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 {
list-style: none;
padding-left: 0;
}
.userlist_pawnAdmin {
color: red;
}
.userlist_pawnModerator {
color: blue;
}
.userlist_pawnMember {
color: green;
}
.userlist_pawnAdmin + .userlist_pawnModerator,
.userlist_pawnModerator + .userlist_pawnMember {
margin-top: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id = "userlist"></ul>
- 2 回答
- 0 關(guān)注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消