[英]jQuery - How to add css to a parent element if child element has certain css class
I searched through the "If parent element has x, add y css to child" questions but didn't find an answer for my case. 我搜索了“如果父元素有x,向子元素添加y css”问题,但没有找到我的情况的答案。
I have a page with some input fields inside multiple div elements. 我有一个页面,其中多个div元素中都有一些输入字段。 Some of these div elements have a displayNone class, which hides the element.
其中一些div元素具有displayNone类,该类隐藏该元素。 But the parent div of this element has a grey background.
但是此元素的父级div具有灰色背景。 So the element self is hidden but I still see the grey background.
因此元素self被隐藏了,但我仍然看到灰色背景。 I want to add the displayNone to the parent div so the grey background will be hidden as well.
我想将displayNone添加到父div,以便灰色背景也将被隐藏。
Also, adding the displayNone class to the parent div should have no effect on the other div element (with greyBackground class). 另外,将displayNone类添加到父div应该不会对另一个div元素(使用greyBackground类)产生影响。
I am not able to change the html so I need a jQuery/javascript solution. 我无法更改html,因此我需要jQuery / javascript解决方案。
I was thinking something like 我在想类似
$('.theClass').each(function() {
if($("div").hasClass("displayNone")){
document.getElementById("idElement").style.display = "none";
}
});
but i need to add the class to a div element without an id. 但是我需要将该类添加到没有id的div元素中。
Here is some code 这是一些代码
CSS
CSS
.formcheckbox {
background: #F2F2F2;;
}
.greyBackground{
background: #F2F2F2;;
}
.displayNone {
display: none;
}
HTML
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>
I guess your problem is the parent of the element has a padding on it and even if you hide the child elements the element is still visible like this snippet: 我猜您的问题是元素的父元素上有填充,即使您隐藏了子元素,该元素仍然是可见的,如以下代码段所示:
.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>
To solve it the way you want you can use parents()
function on Jquery: 要解决您想要的方式,可以在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.