Tips on incorporating a class into a link by utilizing the next() method in JQuery

Question

Tips on incorporating a class into a link by utilizing the next() method in JQuery

Is there a way to locate the next link after an active class within a class and then apply the active class to that new link? I attempted to use the next() function, but it doesn't seem to be functioning as expected.

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

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"><a href="" class="testx active">a</a></div>
<div class="test"><a href="" class="testx">b</a></div>
<div class="test"><a href="" class="testx">c</a></div>
<div class="test"><a href="" class="testx">d</a></div>
<div class="test"><a href="" class="testx">e</a></div>

<button id="next">click</button>

javascript html jquery css

Answer 1

Answer №1

Instead of using a, you can utilize .next for .test

$("#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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"><a href="" class="testx active">a</a></div>
<div class="test"><a href="" class="testx">b</a></div>
<div class="test"><a href="" class="testx">c</a></div>
<div class="test"><a href="" class="testx">d</a></div>
<div class="test"><a href="" class="testx">e</a></div>

<button id="next">click</button>

Answer 2

Instead of using a, you can utilize .next for .test

$("#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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"><a href="" class="testx active">a</a></div>
<div class="test"><a href="" class="testx">b</a></div>
<div class="test"><a href="" class="testx">c</a></div>
<div class="test"><a href="" class="testx">d</a></div>
<div class="test"><a href="" class="testx">e</a></div>

<button id="next">click</button>

Answer 3

Answer №2

To find the index of the test div where the a tag has the class active, you can use the following code snippet. Once you have the index, you can add the active class to its children such as the a tag.

Sample Code :

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

.active {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--place in an outer div-->
<div>
  <div class="test"><a href="" class="testx active">a</a></div>
  <div class="test"><a href="" class="testx">b</a></div>
  <div class="test"><a href="" class="testx">c</a></div>
  <div class="test"><a href="" class="testx">d</a></div>
  <div class="test"><a href="" class="testx">e</a></div>
</div>
<button id="next">click</button>

Answer 4

To find the index of the test div where the a tag has the class active, you can use the following code snippet. Once you have the index, you can add the active class to its children such as the a tag.

Sample Code :

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

.active {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!--place in an outer div-->
<div>
  <div class="test"><a href="" class="testx active">a</a></div>
  <div class="test"><a href="" class="testx">b</a></div>
  <div class="test"><a href="" class="testx">c</a></div>
  <div class="test"><a href="" class="testx">d</a></div>
  <div class="test"><a href="" class="testx">e</a></div>
</div>
<button id="next">click</button>

Answer 5

Answer №3

Your code is not functioning correctly due to the selector being placed inside the next() function, which targets that specific element instead of the intended next element. Additionally, the element "a" does not have a direct next sibling but rather the surrounding div does.

To resolve this issue, modify the code to target the parent div's next element upon triggering the next event, then select the child element "a" and apply the active class. Refer to the updated code below for clarification.

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

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"><a href="" class="testx active">a</a></div>
<div class="test"><a href="" class="testx">b</a></div>
<div class="test"><a href="" class="testx">c</a></div>
<div class="test"><a href="" class="testx">d</a></div>
<div class="test"><a href="" class="testx">e</a></div>

<button id="next">click</button>

Answer 6

Your code is not functioning correctly due to the selector being placed inside the next() function, which targets that specific element instead of the intended next element. Additionally, the element "a" does not have a direct next sibling but rather the surrounding div does.

To resolve this issue, modify the code to target the parent div's next element upon triggering the next event, then select the child element "a" and apply the active class. Refer to the updated code below for clarification.

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

.active { color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"><a href="" class="testx active">a</a></div>
<div class="test"><a href="" class="testx">b</a></div>
<div class="test"><a href="" class="testx">c</a></div>
<div class="test"><a href="" class="testx">d</a></div>
<div class="test"><a href="" class="testx">e</a></div>

<button id="next">click</button>

Tips on incorporating a class into a link by utilizing the next() method in JQuery

Answer №1

Answer №2

Answer №3

Similar questions

Guidelines for utilizing the php mail() function

Display the content as a clickable link using Jquery

What steps should be taken to handle files in the Next JS api?

Navigate to a different page after completing form submission

Troubleshooting CSS problems with positioning 3 fluid div elements

Comparison between sending JSON data through a form submission versus using jQuery/AJAX

How can you check if a field is blank without allowing any empty spaces to be saved in JavaScript?

What is the method for looping through and inserting objects into an array using JavaScript's $.each function?

What is the ideal way to iterate a loop in jQuery while using setTimeout?

Apply a translucent background color to an image element using CSS

Is there a way to shift this div to the bottom and incorporate some quirky pop-up squares?

Calculate the worth of a specific item within an array of objects and save the outcome as a new attribute

Tips for making dynamic keys and values in JavaScript arrays

Modifying the values of Highcharts-Vue chart options does not result in any changes once they have been

Having difficulty resolving all parameters for the component: (?, [object Object]) in the Jasmine component Unit Test

Difficulty with spacing in HTML/CSS styling

Is retrieving data from the database causing unexpected additional space to appear in the textarea?

Strategies for Repurposing local file.js across multiple Vue projects

Arranging HTML elements using Jquery sorting

Customize the order of elements in Bootstrap for mobile devices