How to add a class to a link using next() function in Jquery?

Question

I have a link inside a class which have active class. I want to find the next link of that active class and add active class in the new link. I tried to use next() function but it is not working.

$("#next").on("click", function() {
  $(".test a.active").next(".test a").addClass("active");
});

.active { color: red; }


a
b
c
d
e

user_6235047 · Answer

You could use .next for .test instead of a

$("#next").on("click", function() {
 const cls = $("a.active");   
 cls.removeClass('active') // remove previous active if you need
 cls.closest('.test').next(".test").children('a').addClass("active");
});

.active{
  background-color:green;
  color:white;
}


a
b
c
d
e

user_10606400 · Answer

You can get index of your test div where a tag has active class .Then ,using that index get next div and add active class to its children i.e : a tag.

Demo Code :

$("#next").on("click", function() {
  var index_ = $("a.active").closest(".test").index() + 1 //get index of div ..which has active class add 1 
  $(".testx").removeClass("active") //remove from others 
  $(".test:eq(" + index_ + ") .testx").addClass("active"); //add to next
});

.active {
  color: red
}




  a
  b
  c
  d
  e

user_2028234 · Answer

The reason your code is not working because you added the selector inside the next() code which means it will select that element, not the next element and also the element "a" has no next element but rather the div.

Solution, upon trigger of next check the parent div next element then select the children which is "a" and add the class active. Please see code below.

$("#next").on("click", function() {
  $(".test a.active").removeClass( "active" ).parent().next().children().addClass("active");
});

.active { color: red; }


a
b
c
d
e

How to add a class to a link using next() function in Jquery?

3 Answers