Select element, ignoring specific class

Asked

Viewed 280 times

2

Come on... Suppose I have something like the list below.

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

I need a selector that captures the first DIV within the LIST, this is easy:

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

So far so good, I have a JS where I handle the content of the DIV and at the end I remove the DIV from the DOM.

My problem is: If the first DIV has the CLASS "sending", I cannot remove it, until the message has been sent, in which case the DIV that my selector has to take is the first DIV that does not have the CLASS "sending", which in the example is the 3rd.

Is it possible to do this simply, inside that selector I’m using? What should I modify?

PS: It does not serve me answers involving more JS beyond what I showed here.

I want to know what I change in the selector below, to select the DIV that did not have the "sending" CLASS, if it is possible to ignore a specific CLASS, inside the selector.

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

1 answer

4


Da to capture it using selector :not filtering the div's who do not have the class .enviando, together with the dial :first to take only the first 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>

  • Show! I think that’s what I was looking for, I knew there was a function .not in Jquery, but I didn’t know it could be used inside the selector. Thank you!

  • 1

    @Fabianolothor Yes, can do both ways, with the functions would be: $(".lista div").not(".enviando").first().css("background-color", "yellow"); dispose! =)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.