0

O sistema que estou trabalhando gera uma li com uma lista de contato, a cada minuto o JQuery faz uma consulta para verificar se tem mensagem para algum usuário da lista. Atualmente caso tenha alguma mensagem, o sistema insere uma class no i dentro da a href e o mesmo fica piscando para indicar uma nova mensagem.

Quero reposicionar a li que tem uma nova mensagem na primeira posição da lista, quando tiver uma nvoa mensagem.

Por exemplo, quando tiver uma mensagem para o fulano 4, quero posicinar o li acima (closest) na primeira posição da lista.

<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>
2
  • O objetivo é ordenar os li's de acordo com o data-process-id ?
    – Isac
    Commented 30/05/2018 às 16:47
  • Não, a ordem da li não importa. Toda vez que chegar uma mensagem nova o fa-comments começa a piscar, o que eu quero é que o li acima do fa-comments seja transferido para o primeiro li da lista. Estou pensando em uma lista grande, se o li com mensagem tiver lá no final da lista, o usuário não vai ver o item piscando.
    – RRV
    Commented 30/05/2018 às 17:11

1 Resposta 1

0

Use o prepend do jQuery mesmo para isso.

Por exemplo:

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

É só colocar isso depois que você atualizar as mensagens.

(Ah e claro, ao invés de i.fa.fa-comments use sua classe quando está ativo o i, por exemplo: .msgNova)

-Edit:

Neste exemplo eu fiz um intervalo para escolher um elemento aleatório para deixar como "nova mensagem". (No seu caso é só quando você alterar).

Depois ele executa a linha que te mostrei e deixa o novo no topo.

No começo eu também eu defini um evento click em cada item, para ver que mesmo alterando de lugar o link não perde nem eventos nem atributos. Só reposiciona mesmo.

$(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>

4
  • Henrique, a idéia não é adicionar um novo li, mas sim reposicionar o li que tenha mensagem e colocá-lo no início da lista. Por exemplo, se chegar uma mensagem para o data-process-id=4, quero reposicionar o closest li para o topo da lista.
    – RRV
    Commented 30/05/2018 às 17:13
  • De toda forma, se o append ou prepend for usado em um elemento existente ele só reposiciona mesmo, não chega a remover o elemento. Nesse caso creio que você pode usar sem problemas Commented 30/05/2018 às 17:14
  • Entendi, mas teria que remover o elemento e criar o mesmo no topo da lista. Se não conseguir outra solução, posso usar esta técnica.
    – RRV
    Commented 30/05/2018 às 17:52
  • Beleza, mas caso precise usar o que te falei eu coloquei um exemplo ali para você entender um pouco melhor. Espero que ajude! Commented 30/05/2018 às 18:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .