Remove Klasse, wenn vorhanden und neue hinzufügen jquery mit

Question

Ich habe eine Markup für <ul> wie folgt:

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

Hier möchte ich li überprüfen, eine Klasse hat active2 genannt, und wenn ja, dann muss ich entfernen diese Klasse und müssen zu dieser li andere Klasse hinzufügen.

Dies ist, wie ich es in jQuery versucht:

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

Aber es funktioniert nicht.

Kann mir jemand helfen, das herauszufinden?

Answer 1

Um hasClass() zu verwenden, müssten Sie alle li Elemente durchlaufen und sie einzeln überprüfen.

Allerdings gibt es keine Notwendigkeit für hasClass() hier überhaupt, wie Sie die .active2 Elemente direkt auswählen und anrufen toggleClass() auf sie, wie folgt aus:

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

Sie nicht hasClass() benötigen, Sie kann das einfach tun:

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