如何在 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'];

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

            } 

        })

    })

Answer 2

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

请注意，我使用对象文字来确定用户角色的相对顺序- 因为所需的结果不是直接按字母顺序排列的。这用于通过引用相关用户角色的值来确定用户的排序顺序（而不是简单地按字母顺序对数组进行排序）。

也不是用于排序的一个衬里 - 这可以分成一个单独的命名函数，因为另一个函数需要它（并且排序顺序也可以修改，以便它对不同的用户显示不同的内容。

我还使用了 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>