CODEWITHSUNDEEP
javascriptjqueryhtml
nouptime
nouptime

Reputation: 10419

Remove the class of one element and assign it to another using JavaScript

I need to remove the selected class of an <a> and assign it the last <a> instead. Both are nested within individual <li> elements.

Here's an example of the code:

<ul class="tabs clearfix">
   <li class="tab"><a href="#one" class="selected">Home</a></li>
   <li class="tab"><a href="#two">About</a></li>
   <li class="tab"><a href="#three">Profile</a></li>
   <li class="tab"><a href="#four">History</a></li>
   <li class="tab"><a href="#five">The Beginning of V-Cube</a></li>
</ul>

How can I achieve this using JavaScript/jQuery? Please advise.

EDIT:

Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?

EDIT #2:

Thank you so much everyone for the quick response. All your answers were spot on, wish I could mark them all as answers :)

Upvotes: 1

Views: 494

Answers (5)

guradio
guradio

Reputation: 15555

$('.clearfix').find('.selected').removeClass('selected');
$('.clearfix').find('li:last').find('a').addClass('selected');
$("a[href$='five']").addClass('bold');
.selected {
  color: red
}
.bold {
  font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
  <li class="tab"><a href="#one" class="selected">Home</a>
  </li>
  <li class="tab"><a href="#two">About</a>
  </li>
  <li class="tab"><a href="#three">Profile</a>
  </li>
  <li class="tab"><a href="#four">History</a>
  </li>
  <li class="tab"><a href="#five">The Beginning of V-Cube</a>
  </li>
</ul>

Just use .removeClass() and .addClass()

.removeClass()

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

.addClass()

Description: Adds the specified class(es) to each element in the set of matched elements.

Upvotes: 1

Francesco
Francesco

Reputation: 1413

it is quite easy also in vanilla JS:

document.querySelector('.selected').classList.remove('selected');

document.querySelector('.tabs li:last a').classList.add('selected');

If you want to use an arbitrary a and select the attribute href then you should use this selector:

a[href="HREFVALUE"]

Upvotes: 1

Tushar
Tushar

Reputation: 87203

To remove class from an element, use removeClass.

To get the last element, use :last selector or last(). To add new class to element use addClass

$('.selected').removeClass('selected');

$('.tabs li:last a').addClass('selected');
// OR
// $('.tabs li').last().children('a').addClass('selected');
.selected {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
  <li class="tab"><a href="#one" class="selected">Home</a>
  </li>
  <li class="tab"><a href="#two">About</a>
  </li>
  <li class="tab"><a href="#three">Profile</a>
  </li>
  <li class="tab"><a href="#four">History</a>
  </li>
  <li class="tab"><a href="#five">The Beginning of V-Cube</a>
  </li>
</ul>

Update

Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?

$('.tabs a[href="#five"]').addClass('selected');

Upvotes: 2

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

Try this:

$(document).ready(function(){
   var classname = $(".tabs li:first-child a").attr("class");
   console.log(classname);
   $(".tabs li:last-child a").addClass(classname);
   $(".tabs li:first-child a").removeClass();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs clearfix">
   <li class="tab"><a href="#one" class="selected">Home</a></li>
   <li class="tab"><a href="#two">About</a></li>
   <li class="tab"><a href="#three">Profile</a></li>
   <li class="tab"><a href="#four">History</a></li>
   <li class="tab"><a href="#five">The Beginning of V-Cube</a></li>
</ul>

Upvotes: 1

Bhargav Ponnapalli
Bhargav Ponnapalli

Reputation: 9412

Try this.

$(".tabs li").first().find("a").removeClass("selected");
$(".tabs li").last().find("a").addClass("selected");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs clearfix">
   <li class="tab"><a href="#one" class="selected">Home</a></li>
   <li class="tab"><a href="#two">About</a></li>
   <li class="tab"><a href="#three">Profile</a></li>
   <li class="tab"><a href="#four">History</a></li>
   <li class="tab"><a href="#five">The Beginning of V-Cube</a></li>
</ul>

Upvotes: 1

Related Questions