CODEWITHSUNDEEP
jquery
Adyyda
Adyyda

Reputation: 335

Add next-button new class only when a inside last li has .active

I have a jscarousel lite carousel that uses a similar structure to this

 <div id="prev-button">
      Previous
    </div>
    <ul class="thumbnails">
      <li class="" data-skus="">
        <a class="thumbnail">
          <img src="">FIRST</a>
      </li>
      <li class="" data-skus="">
        <a class="thumbnail">
          <img src="">SECOND</a>
      </li>
      <li class="" data-skus="">
        <a class="thumbnail active">
          <img src="">THIRD</a>
      </li>
    </ul>
    <div id="next-button">
      Next
    </div>

First thumbnail is active by default and on next-button click, active class is removed from first thumbnail and added to second thumbnail and main image changes and so on.

I need to add a class to the next-button, only when the last li has an a with .active.

Something like

 if ('ul li:last-child a.active') {
    $('.next-button').addClass('new-style');
  }

This code is not working properly and can't figure out how to solve the problem.

https://jsfiddle.net/Adyyda/mdfot3ce/1/

Upvotes: 0

Views: 28

Answers (1)

Lukas Grofcik
Lukas Grofcik

Reputation: 498

firstly, you need to use jQuery in your condition, not just string, like this

$('ul li:last-child a.active').length > 0

then you need to query the button by id (#) not class (.)

$('#next-button')

so, in the end, it should look something like this

if ($('ul li:last-child a.active').length > 0) {
   $('#next-button').addClass('new-style');
}

Upvotes: 1

Related Questions