specified class but jQuery jumps element

Asked

Viewed 87 times

0

I have this HTML

<div class="slider">

 <div class="slide ativa">
   <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
   <span>Este é 1</span>
 </div>

 <div class="slide">
   <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
   <span>Este é 2</span>
 </div>

 <nav>
  <button class="anterior">Anterior</button>
  <button class="proximo">Próximo</button>
 </nav>

</div>

And this jQuery

$(document).ready(function(e) {

  function startslider() {  

    ativa = $("div.slider div.ativa")

    if (!$(ativa).next().length) {
      ativa = blocos[0]
    }

     $(ativa)
        .removeClass("ativa")
        .next()
        .addClass("ativa")

     setTimeout(startslider, 5000)
  }

  setTimeout(startslider, 5000)

})

The idea here is to walk ONLY as divs whose class is .slide. Can’t get to run on the tag NAV.

But it seems that the jQuery is setting the object NAV also for the class .slide.

How do we fix this? My impression is that

$(active). next(). length

It will always be true because there is no comparison with .slide to know what has div.slide

jquery
  • 5

    Be sure to finish or give feedback on your questions. This is important for the community.

  • 6

    Most of your questions are without appointments with a correct answer. This is not interesting for the community. This means that you ask questions, get answers and do not finish or mark any as correct, or do not seek to solve... this runs away from the purpose of the site. Review your questions and try to solve them.

  • 5

    In addition, abandoning questions is bad for both the community and those who tried to answer it. Review this.

  • This question is being debated at the goal: https://pt.meta.stackoverflow.com/q/7041/132

  • I agree with you. I’m sorry. my mistake. I corrected it. I chose an answer that, for me, was easier to understand. But thanks for the guidance. It won’t happen again.

1 answer

4


That’s what’s really going on. This .next() below is picking up the next element after the .ativa, in the case, the nav:

$(ativa)
.removeClass("ativa")
.next()
.addClass("ativa")

What you need to do is check .next in the if is a div.slide:

if (!$(ativa).next("div.slide").length) {

But a different treatment is also needed, so it is necessary to insert a else to return to class .ativa for the first element with .first().

See how it would look:

$(document).ready(function(e) {

   function startslider() {  
   
      ativa = $("div.slider div.ativa")
   
      if (!$(ativa).next("div.slide").length) {
         // remove a classe do último
         $(ativa)
         .removeClass("ativa")
   
         // adiciona a classe no primeiro
         $("div.slider div.slide")
         .first()
         .addClass("ativa")
      }else{
         $(ativa)
         .removeClass("ativa")
         .next()
         .addClass("ativa")
      }
   
      setTimeout(startslider, 5000)
   }
   
   setTimeout(startslider, 5000)

})
div.ativa{
   display: block;
}

.slide{
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">

 <div class="slide ativa">
   <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg" />
   <span>Este é 1</span>
 </div>

 <div class="slide">
   <img class="fade" src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg" />
   <span>Este é 2</span>
 </div>

 <nav>
  <button class="anterior">Anterior</button>
  <button class="proximo">Próximo</button>
 </nav>

</div>

Browser other questions tagged jquery

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