Repositioning li with JQuery

Question

Repositioning li with JQuery

Navigation

#1 by (0 votes)

0

The system I'm working on generates a li with a contact list, every minute JQuery makes a query to check if it has a message for any users in the list. Currently, if you have a message, the system inserts a class into i within the href and it flashes to indicate a new message.

I want to reposition the li that has a new message in the first position of the list when it has a new message.

For example, when I have a message for so-and-so 4, I want to position the above in the first position in 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>

jquery

asked by anonymous 30.05.2018 / 18:20

1 answer

Confirmation email script to format worksheet

score 0 · Answer 1

Use jQuery prepend even for this.

For example:

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

Just put this in after you update the messages.

(Oh 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 on top.

At first I also defined an event click on each item, to see that even changing the link does not lose neither events nor attributes. Just reposition it.

$(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><ulid="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>