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>