How can I add a class to an element if an anchor inside a list item is active?

Question

I have this structure:

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

I need to add new-class to id="prev-button" when the first <li> has active class on its <a> child.

When first anchor doesn't have active class, remove the new-class from id="prev-button"

Also, when last list item has active class added to its child anchor, same new-class has to be added to id="next-button" .

I tried to add new-class to the parent list item when the anchor has active class and is not working.

if ($('.thumbnail').is(".active")) {
    $(this).parent().addClass("active");
}

Answer 1

You can use .index to know the sequential order of the selected element. So depending on which one is active, the following expression:

$(".thumbnail.active").parent().index()

will evaluate to 0, 1 or 2.

Then with toggleClass() you can choose to set the "new-class" on the first button when, and only if, that index is 0, and something similar can be done for the other button.

Here is a demo:

 // The argument to this function determines how the current selection should move: // 0: don't move it; just apply the necessary CSS // 1: move it down // -1: move it up function select(dir) { let last = $(".thumbnail").length - 1; let curr = $(".thumbnail.active").parent().index() + dir; if (curr >= 0 && curr <= last) { $(".thumbnail").removeClass("active").eq(curr).addClass("active"); $("#prev-button").toggleClass("disabled", curr == 0); $("#next-button").toggleClass("disabled", curr == last); } } $("#prev-button").click(select.bind(0, -1)); $("#next-button").click(select.bind(0, 1)); select(0); // initialise also on page load

 #prev-button, #next-button { padding: 5px; text-align: center; background: lightblue; display: inline-block; user-select: none; cursor: pointer; } .active { background: yellow } #prev-button.disabled, #next-button.disabled { background: silver }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="prev-button"> Previous </div> <ul class="thumbnails"> <li class="" data-skus=""> <a class="thumbnail active"> <img src="">first</a> </li> <li class="" data-skus=""> <a class="thumbnail"> <img src="">second</a> </li> <li class="" data-skus=""> <a class="thumbnail"> <img src="">third</a> </li> </ul> <div id="next-button"> Next </div>

Without parent().index() :

The above is quite sensitive to the document structure. Alternatively, you can use index with an argument, which works much like indexOf on arrays:

 // The argument to this function determines how the current selection should move: // 0: don't move it; just apply the necessary CSS // 1: move it down // -1: move it up function select(dir) { let $links = $(".thumbnail"); let $active = $links.filter(".active"); let curr = $links.index($active) + dir; let last = $links.length - 1; if (curr >= 0 && curr <= last) { $(".thumbnail").removeClass("active").eq(curr).addClass("active"); $("#prev-button").toggleClass("disabled", curr == 0); $("#next-button").toggleClass("disabled", curr == last); } } $("#prev-button").click(select.bind(0, -1)); $("#next-button").click(select.bind(0, 1)); select(0); // initialise also on page load

 #prev-button, #next-button { padding: 5px; text-align: center; background: lightblue; display: inline-block; user-select: none; cursor: pointer; } .active { background: yellow } #prev-button.disabled, #next-button.disabled { background: silver }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="prev-button"> Previous </div> <ul class="thumbnails"> <li class="" data-skus=""> <a class="thumbnail active"> <img src="">first</a> </li> <li class="" data-skus=""> <a class="thumbnail"> <img src="">second</a> </li> <li class="" data-skus=""> <a class="thumbnail"> <img src="">third</a> </li> </ul> <div id="next-button"> Next </div>

Answer 2

Why are you trying to access the id="prev-button" with $(this).parent().addClass("active"); ? The parent would be the li element. Why not use $("#prev-button") to access the prev-button?

You can create a playground at Codepen.io to experiment, for example. I have created one this which is the first fix for what you asked: https://codepen.io/peter-krebs/pen/xxdxoPZ

https://api.jquery.com/ has tons of resources for you to read with example code. Don't be afraid to educate yourself, don't just guess how it works.