javascript - Prev/Next cycle through list where li class is active

Question

I am trying to cycle through list with prev/next buttons. This is currently working as per the code below, however, in my application some of the list items are set to hidden unless they have a class of active which is defined by user selection.

I therefore only require the next button to apply the relevant active class to the next closest li which is also set to active, as these tabs should not be accessible until they're set to active.

Any help on this would be greatly appreciated.

$(".next").on("click", function () {
// Current selected vars
let currentActive = $("li.selected");
let currentArea = $(".area.selected");

// Remove selected from current
currentActive.removeClass("selected");
currentArea.removeClass("selected");

// Add selected to next
if (currentActive.is(":last-child")) {
  $(".tabs li").first().addClass("selected");
  $(".area").first().addClass("selected");
} else {
  currentActive.next().addClass("selected");
  currentArea.next().addClass("selected");
}});

question from:https://stackoverflow.com/questions/65920192/prev-next-cycle-through-list-where-li-class-is-active

Answer 1

I have now solved this using nextAll() and then selecting the first with first().