How to add/remove class to specific anchor elements inside div?

Question

I have a DOM as shown below in which to add/remove class only after third anchor element (only 4th and 5th element).

<div class="featured-block">
   <a href="" class="featured-block__item cf">   <!-- 1st element -->
   </a>
   <a href="" class="featured-block__item cf">   <!-- 2nd element -->
   </a>
   <a href="" class="featured-block__item cf">   <!-- 3rd element -->
   </a>
   <a href="" class="featured-block__item cf">  <!-- Add/remove (4th element)-->
   </a>
   <a href="" class="featured-block__item cf">  <!-- Add/remove (5th element)--> 
   </a>
</div>

I have used the following JS code in order to add/remove class featured-block__item-active in the DOM above at the 4th and 5th position.

The problem which I am having right now is that it adds/removes the class at 4th and 5th position and then adds/removes class again at 1st/2nd/3rd position (which I don't want).

document.querySelectorAll('.featured-block .featured-block__item')[3].classList.add('featured-block__item-active');  // Line Z (Adding at 4th element) 
    const pics = document.querySelectorAll('.featured-block .featured-block__item');

    function toggleClass() {
        const activePic = document.querySelector('.featured-block__item.featured-block__item-active');
        const activeIndex = Array.prototype.indexOf.call(pics, activePic);
        const nextIndex = activeIndex === lastPic ? 0 : activeIndex + 1;
        const nextPic = pics[nextIndex];

        setTimeout(() => activePic.classList.remove('featured-block__item-active'), transitionDelay);         // Line A
        setTimeout(() => nextPic.classList.add('featured-block__item-active'), totalDelay);                   // Line B
    }

    setInterval(toggleClass, intervalDelay);

Problem Statement:

I am wondering what changes I should make in the JS above so that it add/remove featured-block__item-active class only at 4th and 5th position.

I think, I need to make changes at Line Z, Line A and Line B.

put the actual rendered fo `let transitionDelay = {"rotation_interval_secs"}?> * 1000;` since that PHP has nothing to do with the question — Mark Schultheiss, Aug 21 '19 at 13:57
You have tagged your question with `jQuery` but you are not using any jQuery in your code. The kind of operation you want to do is much easier with jQuery. — Rawland Hustle, Aug 21 '19 at 14:06
@RawlandHustle Hi, I have removed jquery from the tag. I am wondering if you get my question ? — flash, Aug 21 '19 at 14:15
If you want to use native Javascript, @MarkSchultheiss will probably help you. I would suggest using jQuery though since it's much easier to use for this kind of manipulations. — Rawland Hustle, Aug 21 '19 at 14:36

score 1 · Accepted Answer · answered Aug 21 '19 at 14:05

Just change 0 to 3.

document.querySelectorAll('.featured-block .featured-block__item')[3].classList.add('featured-block__item-active'); // Line Z (Adding at 4th element) 
const pics = document.querySelectorAll('.featured-block .featured-block__item');
const lastPic = pics.length - 1;
const transitionDuration = 500; // matches CSS
let transitionDelay = 3 * 1000;
const totalDelay = transitionDuration + transitionDelay;
const intervalDelay = (transitionDuration * 2) + transitionDelay;

function toggleClass() {
  const activePic = document.querySelector('.featured-block__item.featured-block__item-active');
  const activeIndex = Array.prototype.indexOf.call(pics, activePic);
  const nextIndex = activeIndex === lastPic ? 3 : activeIndex + 1;
  const nextPic = pics[nextIndex];

  setTimeout(() => activePic.classList.remove('featured-block__item-active'), transitionDelay); 
  setTimeout(() => nextPic.classList.add('featured-block__item-active'), totalDelay);
}

setInterval(toggleClass, intervalDelay);

.featured-block__item { border: solid lime 1px;}
.featured-block__item-active{background-color: #DDDDFF;}

<div class="featured-block">
  <a href="" class="featured-block__item cf">1  </a>
  <a href="" class="featured-block__item cf">2  </a>
  <a href="" class="featured-block__item cf">3  </a>
  <a href="" class="featured-block__item cf">4  </a>
  <a href="" class="featured-block__item cf">5  </a>
</div>

Hi Mark, thanks for the answer. I believe I didn't explain my question properly. It should **add/remove** the class only at **4th/5th element**. — flash, Aug 21 '19 at 14:11
What your code is doing now that it **add/remove** the class at **4th/5th** element and then it adds/removes again at **1st/2nd/3rd element**. — flash, Aug 21 '19 at 14:11
In your question you have `const nextIndex = activeIndex === lastPic ? 0 : activeIndex + 1;` where I changed 0 to 3...when I run it as I have it it highlights the 4 and 5...not sure what you want differently — Mark Schultheiss, Aug 21 '19 at 15:02
Hi Mark, I hope all is well. I came with one minor problem with the code above. The above code doesn't seem to work in IE. I have posted another question on [SO](https://stackoverflow.com/questions/58756513/script1002-syntax-error-on-ie-11-version?noredirect=1#comment103800802_58756513) in regards to the question above. I am wondering if you can have a look. — flash, Nov 07 '19 at 22:39

How to add/remove class to specific anchor elements inside div?

1 Answers1

Linked