刪除一個元素的類並使用JavaScript將其分配給另一個

Question

我需要刪除<a>的選定類，並為其分配最后一個<a> 。 兩者都嵌套在單獨的<li>元素中。

這是代碼示例：

<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>

如何使用JavaScript / jQuery實現此目的？ 請指教。

編輯：

假設我不想專門定位最后一個標簽。 可以將href用作選擇器嗎？

編輯＃2：

非常感謝大家的快速響應。 您所有的答案都當場，希望我可以將它們全部標記為答案:)

Answer 1

要從元素中刪除類，請使用removeClass 。

要獲取最后一個元素，請使用:last選擇器或last() 。 要將新類添加到元素，請使用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> 

---

更新資料

假設我不想專門定位最后一個標簽。 可以將href用作選擇器嗎？

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

Answer 2

嘗試這個。

 $(".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> 

Answer 3

 $('.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> 

只需使用.removeClass() and .addClass()

.removeClass()

從匹配的元素集中的每個元素中刪除單個類，多個類或所有類。

.addClass()

描述：將指定的類添加到匹配元素集中的每個元素。

Answer 4

嘗試這個：

 $(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> 

Answer 5

在香草JS中也很容易：

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

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

如果要使用任意a並選擇屬性href，則應使用此選擇器：

a[href="HREFVALUE"]