Удалить класс, если существует и добавить новый с помощью JQuery

Question

У меня есть код для <ul>, как показано ниже:

<ul>  
    <li class=""><a href="">Insulated And Extruded</a></li> 
    <li class=""><a href="">Grille Type Rolling</a></li> 
    <li class="active2"><a href="">PVC High Speed Doors</a></li> 
    <li class=""><a href="">Swinging doors</a></li> 
</ul> 

Здесь я хочу, чтобы проверить li имеет класс с именем active2, и если это произойдет, то мне нужно удалить этот класс и нужно добавить к нему другой класс li.

Это, как я попробовал его в JQuery:

if($('ul li').hasClass('active2')) { 
    $(this).removeClass('active2').addClass('active1'); 
} 

Но это не работает.

Может ли кто-нибудь помочь мне разобраться в этом?

Answer 1

Чтобы использовать hasClass(), вам необходимо пройти через все элементы li и проверить их индивидуально.

Однако нет никакой необходимости hasClass() здесь вообще, как вы можете выбрать .active2 элементы непосредственно и вызвать toggleClass() на них, как это:

$('ul li.active2').toggleClass('active2 active1');

.active1 { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul>  
 
    <li class=""><a href="">Insulated And Extruded</a></li> 
 
    <li class=""><a href="">Grille Type Rolling</a></li> 
 
    <li class="active2"><a href="">PVC High Speed Doors</a></li> 
 
    <li class=""><a href="">Swinging doors</a></li> 
 
</ul>

Answer 2

Вам не нужно hasClass(), Вы может просто сделать это:

$('ul li.active2').removeClass('active2').addClass('active1');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul>  
 
    <li class=""><a href="">Insulated And Extruded</a></li> 
 
    <li class=""><a href="">Grille Type Rolling</a></li> 
 
    <li class="active2"><a href="">PVC High Speed Doors</a></li> 
 
    <li class=""><a href="">Swinging doors</a></li> 
 
</ul>