Jquery code is not working in next js . Showing unexpected results but working on react

Question

i am trying to implement an ui requirement. I want to add a active class name to the children div one at a time. 1st it will add the class in first child, and then the class will be removed and to be added in the 2nd child div. And it will infinitly itereate.

Here is my code in next js

        $(".softwares_container").each(function () {
            (function ($set) {
                setInterval(function () {
                    var $cur = $set
                        .find(`.${st.active}`)
                        .removeClass(`${st.active}`);
                        //store inner html of current item
                     
                    
                    var $next = $cur.next().length
                        ? $cur.next()
                        : $set.children().eq(0);
                    $next.addClass(`${st.active}`);
                    //store inner element of next item
                    //set inner html of current item to inner html of next item
                    var $next_inner = $next.children().eq(0);
                    setValue({
                        name: $next_inner.attr('alt'),
                        description: $next_inner.attr('data-info')
                    })
                    // setImage($next_inner.attr('src'))
                }, 1000);
            })($(this));
        });
    

    <div className={`softwares_container ${st.left_container}`}>
                        <div className={` ${st.img}`}  alt="1">
                            <img src={ae.src} data-info="this is aftereffects" alt="After effects" />
                        </div>
                        <div className={st.img} alt="2">
                            <img src={pr.src} alt="Adobe Premiere pro" />
                        </div>
                        <div className={st.img}>
                            <img src={ps.src} alt="Adobe Photoshop" />
                        </div>
                        <div className={st.img}>
                            <img src={xd.src} alt="Adobe Xd" />
                        </div>
</div>

But it is not working.it is showing unexpected behaviour. It works fine in react .

Can anyone please give me an alternative solution or tell me how to fix the issue?

Here's the link where you can see the unexpected behaviour. https://diptnc.ml/about

Answer 1

You can write an effect that sets the classname for elements in an array in a round-robin manner.

// Keep the interval id around so that 
// it can be cleared when unsubscribing the effect.
let activeFxId; 
/* 
Applies active class to an array of HTMLElement in a round-robin manner.
*/
function activeFx(elements) {
  activeFxId = setInterval(() => {
    const elementsArr = [...elements];
    let idx = elementsArr.findIndex((element) => {
      return element.classList.contains('active');
    });
    if (idx === -1) {
      idx = 0;
    }
    elementsArr[idx].classList.remove('active');
    elementsArr[(idx + 1) % elementsArr.length].classList.add('active');
  }, 2000);
  return () => {
    clearInterval(activeFxId);
  };
}

How you provide this array of elements is left to you. An approach is to store a ref to the parent element containing them and pass that on to the function.

For example,

/* Example component */

import React, {useEffect, useRef} from 'react';

export default () => {
  const ref = useRef();
  useEffect(() => {
    if (ref.current && ref.current.children) {
      return activeFx(ref.current.children);
    }
  });
  return (
    <div ref={ref}>
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  );
};