javascript - 什么是删除除 jquery 中的一个之外的所有类的更清洁方法，如果还没有该类，也无需添加该类

Question

好吧，有一种流行的方法可以清理所有类，除了像

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

main但是，即使一开始没有类，上面的代码也会添加类。

一种解决方法是检查它是否具有类main并相应地执行。但是有没有比这更干净、更短的方法呢？

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

标签： javascriptjquery

Answer 1

以下应该有效：

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

它首先选择<label>下的所有元素#d-one，然后过滤“main”类并将它们设置为class="main"。之后，过滤器被撤销（.end()）并且所有“非.main”元素都被清除所有可能的类。

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