删除除 jquery 中的所有类之外的所有类的更干净的方法是什么，如果还没有该类，则也不添加该类

Question

Well, there is one popular way to clean all classes except one like

 jQuery('#d-one label').attr('class', 'main');

But, the above code also adds main class even if there wasn't there at first.

One workaround is to check if it has the class main or not and perform accordingly. But is there any way cleaner and shorter than this?

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="d-one"> <label for="" class="main one two three"></label> </div> <script> jQuery('#d-one label').attr('class', 'main'); console.log(jQuery('#d-one label').attr('class')); </script> <div id="d-two"> <label for="" class="one two three"></label> </div> <script> jQuery('#d-two label').attr('class', 'main'); console.log(jQuery('#d-two label').attr('class')); </script> <!-- This not just remove, but also add new class --> <div id="d-three"> <label for="" class="one two three"></label> </div> <script> if($( "#d-three label" ).hasClass( "main" )){ jQuery('#d-three label').attr('class', 'main'); }else{ jQuery('#d-three label').removeClass(); } console.log(jQuery('#d-three label').attr('class')); </script>

Answer 1

The following should work:

jQuery('#d-one label').filter('.main').attr('class', 'main')
                      .end().not('.main').removeClass()

It first selects all <label> -elements under #d-one , then filters for class "main" and sets these to class="main" . After that the filter is revoked ( .end() ) and all "non- .main " elements are cleared of all possible classes.

 $('#d-one label').filter('.main').attr('class', 'main') .end().not('.main').removeClass()

 .one {border: red 1px solid} .two {background-color: #ccc} .three {color: green} .main {font-weight:900}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="d-one"> <div id="d-four"> <label for="" class="main one two three">label: main stays and one two three removed!</label> </div> <div id="d-two"> <label for="" class="one two three">label: one two three removed!</label> </div> <div id="d-three"> <label for="" class="one two three">label: one two three removed!</label> </div> </div> </div> <div id="d-five"> <label for="" class="main one two three">label: main one two three - unchanged</label> </div>