Javascript 使用Jquery对数组和元素进行排序

嗨，我是新来的，我尝试在点击事件上排序数组，同时更新我的html，问题是我有一个数组，我在html元素中格式化来显示它

function contactM(contactList) {
    return  $.each(contactList, function(index, val){

 $('#list-contact').append("<li id="+ val.chatid +" class='list group'>"+
"<div class='userAvatar' style='background: #fff url(https:\/\/swinglifestyle.com/s1sp1cture5a/"+val.members[0].picture+ "') 50%; background-size: cover;'>"+
"<div class='status sm'></div>"+
  "</div>"+
  "<div class='userInfo'>"+
  "<div class='msg'>"+val.members[0].name +"</div>"+
 "<div class='msg'>" +val.message+"</div>"+
showNotMsg(val.message)+
                                        "<div class='date'>"+formatDate(val.newest_message) +"</div>"+
  "</div>"+unreadMsgLestThem(val.unread_cnt)
 +"</li>");
});    

比如我的观点 在排序和单击之前

<div>B</div>
<div>A</div>

B
A.

单击并排序后

<div>B</div>
<div>A</div>
<div>A</div>
<div>B</div>

B
A.
A.
B

---

问题出在视图中显示排序正确但也重复有人能帮我吗？

您正在将名为

联系人列表

的数组项添加到

#列表联系人

，然后按下按钮，它会对数组中的项进行排序，但是，这不会改变它们在屏幕上的显示顺序

然后单击一个按钮并执行在第一个位置添加元素的函数，但是您永远不会清除前面（未排序）项的父元素

jQuery具有以下功能来执行此操作，单击按钮时可以添加此功能：

$("#list-contact").empty();

从DOM中删除匹配元素集的所有子节点

---

下面可以找到一个类似的例子，说明在您的代码中如何工作：

contactList=[“d”、“a”、“c”、“b”]
功能contactM（联系人列表）{
返回$。每个（联系人列表、功能（索引、val）{
$（“#列出联系人”）。追加（“”+val+”
”）；
}); 
}
$（“#排序按钮”）。单击（函数（）{
contactList.sort（）；
$（“#列出联系人”）.empty（）；
contactM（联系人列表）；
});
contactM（联系人列表）

排序
您正在追加，但没有删除重复的值。您需要搜索您的
$（“#列出联系人”）
以查找重复的或以前附加的值，删除它们，然后附加排序后的值。您是否也可以发布
联系人列表
数组？请解决此问题，谢谢各位，最后一个示例对我很有用
$("#list-contact").empty();