Question

嗨，我是新手，我尝试在click事件上对数组进行排序，并同时更新我的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>");
});

}

这将打印聊天列表，现在我使用类似的内容。这是我在函数内部调用的click事件，它控制视图以传递排序数组

   $('#by-name').on('click',function() {
       contactList.sort(SortByName);

       contactM(contactList);
   });

例如我的观点排序并单击之前

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

点击并排序

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

问题是在视图中显示给我的是正确排序但也重复有人可以帮助我吗？

Answer 1

您要将名为contactList的数组的项目添加到#list-contact，然后按一个按钮，它将对数组中的项目进行排序，但是这不会改变它们的顺序显示在屏幕上。

然后单击按钮并执行将元素添加到第一位的功能，但是，您永远不会清除以前（未排序）项目的父元素。

jQuery具有以下功能，您可以在单击按钮时添加它：

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

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

示例，该示例在代码中的工作方式如下：

contactList = ["d", "a", "c", "b"]

function contactM(contactList) {
  return  $.each(contactList, function(index, val){
    $('#list-contact').append("<p>" + val + "</p>");
  }); 
}

$("#sortbutton").click(function() {
  contactList.sort();
  $("#list-contact").empty();
  contactM(contactList);
});

contactM(contactList);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list-contact"></div>
<button id="sortbutton">Sort</button>

使用Jquery

1 个答案: