Question

我搜索了“如果父元素有x，将y css添加到孩子”问题，但没有找到我的案例的答案。

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

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

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

我在想像

这样的东西

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

但我需要将类添加到没有id的div元素。

这是一些代码

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

我猜你的问题是元素的父元素上有一个填充，即使你隐藏子元素，元素仍然可见，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

要按照您希望的方式解决它，您可以在Jquery上使用parents()函数：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery - 如果子元素具有某个css类，如何将css添加到父元素

1 个答案: