2

Vamos lá... Suponha que eu tenho algo parecido com a lista abaixo.

<div id="respostas">
  <div class="historico">
    <div class="lista">
      <div class="enviando"><strong>verbot</strong> curar</div>
      <div class="enviando"><strong>verbot</strong> assustar</div>
      <div class=""><strong>verbot</strong> evoluir</div>
      <div><strong>Hideki_kf</strong> lagrima</div>
      <div><strong>Hideki_kf</strong> choro</div>
      <div class="sistema">A resposta era: <strong>chorar</strong></div>
      <div class="sistema">Intervalo...</div>
      <div class="vez">Sua vez, a palavra é: <strong>agrupar</strong></div>
      <div><strong>_Elfo</strong> af</div>
      <div class="sistema">Você pulou a vez!</div>
      <div class="sistema">Intervalo...</div>
      <div class="vez">Vez de <strong>lalua</strong></div>
      <div><strong>_Elfo</strong> ola victon</div>
    </div>
  </div>
</div>

Eu preciso de um seletor que capture a primeira DIV dentro da LISTA, isso é fácil:

divUltimaMensagem = $("div#respostas div.historico div.lista div");

Até aí tudo bem, eu tenho um JS onde eu trato o conteúdo da DIV e no final eu removo a DIV do DOM.

Meu problema é: Se a primeira DIV tiver a CLASS "enviando", eu não posso removê-la, até que a mensagem tenha sido enviada, nesse caso, a DIV que o meu seletor tem que pegar é a primeira DIV que não tiver a CLASS "enviando", que no exemplo, é a 3ª.

É possível fazer isso de forma simples, dentro daquele seletor que estou utilizando? O que devo modificar?

PS: Não me serve respostas envolvendo mais JS além do que mostrei aqui.

Quero saber o que eu mudo no seletor abaixo, para selecionar a DIV que não possuí a CLASS "enviando", se é que é possível ignorar uma CLASS específica, dentro do seletor.

"div#respostas div.historico div.lista div"
0

1 Resposta 1

4

Da para capturá-la utilizando o seletor :not filtrando as div's que não possuem a classe .enviando, juntamente com o seletor :first para pegar somente a primeira div.

$(".lista div:not(.enviando):first").css("background-color", "yellow");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="respostas">
  <div class="historico">
    <div class="lista">
      <div class="enviando"><strong>verbot</strong> curar</div>
      <div class="enviando"><strong>verbot</strong> assustar</div>
      <div class=""><strong>verbot</strong> evoluir</div>
      <div><strong>Hideki_kf</strong> lagrima</div>
      <div><strong>Hideki_kf</strong> choro</div>
      <div class="sistema">A resposta era: <strong>chorar</strong></div>
      <div class="sistema">Intervalo...</div>
      <div class="vez">Sua vez, a palavra é: <strong>agrupar</strong></div>
      <div><strong>_Elfo</strong> af</div>
      <div class="sistema">Você pulou a vez!</div>
      <div class="sistema">Intervalo...</div>
      <div class="vez">Vez de <strong>lalua</strong></div>
      <div><strong>_Elfo</strong> ola victon</div>
    </div>
  </div>
</div>

2
  • Show! Acho que era isso que eu estava procurando, eu sabia que existia a função .not no JQuery, mas não sabia que dava pra usar dentro do seletor. Obrigado! 4/07/2017 às 17:34
  • 1
    @FabianoLothor Sim, da pra fazer dos dois jeitos, com as funções ficaria: $(".lista div").not(".enviando").first().css("background-color", "yellow"); disponha! =)
    – Mathiasfc
    4/07/2017 às 17:36

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 .