jQuery - 如果子元素具有特定的CSS类，如何将css添加到父元素

Question

我通过“如果父元素具有x，将y css添加到子元素”的问题进行搜索，但没有为我的案例找到答案。

我有一个页面，其中包含多个div元素中的一些输入字段。其中一些div元素有一个displayNone类，它隐藏了元素。但是这个元素的父div具有灰色背景。所以元素自己隐藏，但我仍然看到灰色的背景。我想将displayNone添加到父div，所以灰色背景也将被隐藏。

另外，将displayNone类添加到父div应该对其他div元素（使用greyBackground类）没有影响。

我无法更改html，所以我需要一个jQuery/javascript解决方案。

我想这样

$('.theClass').each(function() { 
    if($("div").hasClass("displayNone")){ 
     document.getElementById("idElement").style.display = "none"; 
    }  
}); 

，但我需要的类添加到div元素没有ID。

下面是一些代码

CSS

.formcheckbox { 
    background: #F2F2F2;; 
} 

.greyBackground{ 
    background: #F2F2F2;; 
} 

.displayNone { 
    display: none; 
} 

HTML

<div class="greyBackground"> 
    <label>Label</label> 
    <input type="text"/> 
</div><br> 

<div class="fieldgrp"> 
    <div class="formcheckbox"> 
    <div class="displayNone"> 
     <div class="field-input "> 
      <div class="field"> 
      <input name="abc" value="10" id="10" type="checkbox"> 
      <label id="_10" for="10">10 items </label> 
      </div> 
      <div class="field"> 
      <input name="abc" value="20" id="20" type="checkbox"> 
      <label id="_20" for="20">20 items </label> 
      </div> 
      <div class="field"> 
      <input name="abc" value="50" id="50" type="checkbox"> 
      <label id="_50" for="50">50 items </label> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 

而且 FIDDLE

Answer 1

我猜你的问题是该元素的父上有一个填充，即使你隐藏的子元素的元素还是喜欢这个片段可见：

.formcheckbox { 
 
    background: purple; 
 
    padding:20px; 
 
} 
 
.displayNone { 
 
    display: none; 
 
}

<div class="formcheckbox"> 
 
    <label>Label</label> 
 
    <input type="text"/> 
 
</div><br> 
 

 
<div class="fieldgrp"> 
 
    <div class="formcheckbox"> 
 
    <div class="displayNone"> 
 
     <div class="field-input "> 
 
      <div class="field"> 
 
      <input name="abc" value="10" id="10" type="checkbox" class=""> 
 
      <label id="_10" for="10" class="">10 items </label> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

要解决问题的方法你想你可以jQuery的使用parents()功能：

$('.displayNone').parents('.formcheckbox').addClass('displayNone')

.formcheckbox { 
 
    background: purple; 
 
    padding:20px; 
 
} 
 
.displayNone { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="formcheckbox"> 
 
    <label>Label</label> 
 
    <input type="text"/> 
 
</div><br> 
 

 
<div class="fieldgrp"> 
 
    <div class="formcheckbox"> 
 
    <div class="displayNone"> 
 
     <div class="field-input "> 
 
      <div class="field"> 
 
      <input name="abc" value="10" id="10" type="checkbox" class=""> 
 
      <label id="_10" for="10" class="">10 items </label> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>