Repositioning li with Jquery

Question

The system I am working generates a li with a contact list, every minute Jquery makes a query to check if it has message to any user from the list. Currently if you have a message, the system inserts a class in i inside href and flashes to indicate a new message.

I want to reposition a li that you have a new message in the first position of the list, when you have a new message.

For example, when you have a message for so-and-so 4, I want to pose the above (Closest) in the first position of the list.

<li>
    <a href="#" data-process-id=1 id="chatByContact" class="chatByContact">Fulano 1<i class="fa fa-comments"></i></a>                   
</li>
<li>
    <a href="#" data-process-id=2 id="chatByContact" class="chatByContact">Fulano 2<i class="fa fa-comments"></i></a>                   
</li>
<li>
    <a href="#" data-process-id=3 id="chatByContact" class="chatByContact">Fulano 3<i class="fa fa-comments"></i></a>                   
</li>
<li>
    <a href="#" data-process-id=4 id="chatByContact" class="chatByContact">Fulano 4<i class="fa fa-comments"></i></a>                   
</li>

Answer 1

Use the jQuery prepend for this.

For example:

$("#pai").prepend($("i.fa.fa-comments").closest("li"));

Just put this on after you update the messages.

(Oh and of course, instead of i.fa.fa-comments use your class when i is active, for example: . msgNova)

-Edit:

In this example I took a break to choose a random element to leave as "new message". (In your case it is only when you change).

Then he runs the line I showed you and leaves the new one at the top.

At the beginning I also set an event click on each item, to see that even changing place the link loses neither events nor attributes. Just reposition it anyway.

$(function(){
  $(".chatByContact").on("click",function(){
    alert("Abrir processo: "+$(this).data("process-id"));
  });
  
  // Para testes, definir como nova mensagem 1 li aleatória a cada 5s
  setInterval(function(){
    $(".chatByContact i").removeClass("new");
    var ali=$("#listaDeMensagens li").random();
    ali.find("i.fa").addClass("new");
    
    //Posicionar o selecionado no topo
    $("#listaDeMensagens").prepend($(".new").closest("li"));
  },5000);
  
  
  $.fn.random = function() {
    return this.eq(Math.floor(Math.random() * this.length));
  }   
});

.new{
  display:block;
  width: 10px;
  height: 10px;
  border-radius:50%;
  background-color: #900;
  float:left;
  margin: 5px 5px 0 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="listaDeMensagens">
<li>
    <a href="#" data-process-id=1 id="chatByContact" class="chatByContact">Fulano 1<i class="fa fa-comments"></i></a>                   
</li>
<li>
    <a href="#" data-process-id=2 id="chatByContact" class="chatByContact">Fulano 2<i class="fa fa-comments"></i></a>                   
</li>
<li>
    <a href="#" data-process-id=3 id="chatByContact" class="chatByContact">Fulano 3<i class="fa fa-comments"></i></a>                   
</li>
<li>
    <a href="#" data-process-id=4 id="chatByContact" class="chatByContact">Fulano 4<i class="fa fa-comments"></i></a>                   
</li>
</ul>