Sort array and element Using Jquery

Question

Hi I am new in this I try sort array on click event, and update my html at the same time, the issue is I have an array and I format in html element to show it

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

 $('#list-contact').append(""+
""+
""+
  ""+
  ""+
  ""+val.members[0].name +""+
 "" +val.message+""+
showNotMsg(val.message)+
                                        ""+formatDate(val.newest_message) +""+
  ""+unreadMsgLestThem(val.unread_cnt)
 +"");
});

}

this print a list of chat, now I using some like this. This is my click event I call inside the function is control the view for pass the sort array

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

       contactM(contactList);
   });

for example my view before sort and click

B
A

after click and sort

B
A
A
B

the problem is in the view show me the is sort correctly but also is duplicate some one can help me please ?

user_4417306 · Answer

You're adding the items of an array called contactList to #list-contact, after which you press a button and it sorts items in the array, however this does not change the order in which they are displayed on screen.

Then you click on a button and are executing the function which added the elements in the first place, however you're never clearing the parent element of the previous (unsorted) items.

jQuery has the following function to do this, which you can add when the button is clicked:

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

Remove all child nodes of the set of matched elements from the DOM.

An example of how something like that would work in your code can be found below:

contactList = ["d", "a", "c", "b"]

function contactM(contactList) {
  return  $.each(contactList, function(index, val){
    $('#list-contact').append("" + val + "");
  }); 
}

$("#sortbutton").click(function() {
  contactList.sort();
  $("#list-contact").empty();
  contactM(contactList);
});

contactM(contactList);

Sort array and element Using Jquery

1 Answers