jQuery-removeClass（）应用于除一个类之外的所有类

Question

I want to remove the class .active from all the anchors except the <a> of child number 2; I don't know why this is not working.

 /*Remove ".active" from all the anchors except child number 2 */ $("#list li:not(li:nth-child(2) a)").removeClass("active"); 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <style> .active { color: red; } </style> <div id="list"> <ul> <li><a class="active" href="#">One</a></li> <li><a class="active" href="#">Two</a></li> <li><a class="active" href="#">Three</a></li> </ul> </div> 

Thanks everyone.

Answer 1

You selector is wrong. You should use #list li a:not(li:nth-child(2) a) instead.

 $("#list li a:not(li:nth-child(2) a)").removeClass("active"); 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <style> .active { color: red; } </style> <div id="list"> <ul> <li><a class="active" href="#">One</a></li> <li><a class="active" href="#">Two</a></li> <li><a class="active" href="#">Three</a></li> </ul> </div> 

Answer 2

Your selector was written wrongly, I'm assuming this was a typo resulting from a later edit of the selector, given the misplaced ) character. So, rather than:

$("#list li:not(li:nth-child(2) a)").removeClass("active");

Instead use:

$("#list li:not(li:nth-child(2)) a").removeClass("active");

Your original selector was looking for an <li> element that was not the second-child of its parent and, also, was not an <a> element; this is true for all <li> elements.

 /*Remove ".active" from all the anchors except child number 2 */ $("#list li:not(li:nth-child(2)) a").removeClass("active"); 

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <style> .active { color: red; } </style> <div id="list"> <ul> <li><a class="active" href="#">One</a></li> <li><a class="active" href="#">Two</a></li> <li><a class="active" href="#">Three</a></li> </ul> </div> 

Answer 3

I think this one is better to read:

 $("#list li a").not('#list li:nth-child(2) a').removeClass("active"); 

 .active{ color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="list"> <ul> <li><a class="active" href="#">One</a></li> <li><a class="active" href="#">Two</a></li> <li><a class="active" href="#">Three</a></li> </ul> </div>