[英]How to hide a parent div if an inner div has a certain class, with javascript
Ok so say I have many divs. 好的说我有很多div。 Some of the divs, the children have one class, other divs the children have a different class.
一些div,孩子们有一个班级,其他孩子们有不同的班级。
I want to hide only the divs which have a child with a certain class. 我想只隐藏有一个特定类的孩子的div。
For example, 例如,
<div class="mainDiv">
<div class="kulkul">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childB">
</div>
</div>
</div>
<div class="mainDiv">
<div class="kulkul">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childA">
</div>
</div>
</div>
<div class="mainDiv">
<div class="kulkul">
<div class="childB">
</div>
</div>
</div>
<div class="mainDiv">
<div class="lalala">
<div class="childA">
</div>
</div>
</div>
Now above, let's say that I only want to hide the parent divs which have a child div with the class .childB
现在上面,假设我只想隐藏具有类
.childB
的子div的父div
This can't be done with CSS as far as I know (CSS3 anyway), because CSS doesn't allow you to style the parent div, only a child div. 据我所知(CSS3无论如何),这不能用CSS完成,因为CSS不允许你设置父div的样式,只允许子div。 And the parent
.mainDiv
divs (the ones I want to hide) are all exactly the same. 而父
.mainDiv
div(我想隐藏的那些)都完全一样。
So that leaves javascript. 这样就留下了javascript。
Using the example above, how can I hide all the .mainDiv
divs which contain a child div with the class .childB
? 使用上面的示例,如何隐藏包含带有
.childB
类的子div的所有.mainDiv
div?
HIDING PARENT ELEMENT based on its direct descendant 根据其直系后裔隐藏父母元素
//Update the **sample-element-to-hide** with whatever you wanted to use as a child class with the parent element you wanted to hide e.g., 'childB'
var elementToHideList = document.getElementsByClassName("sample-element-to-hide");
for (var i = elementToHideList.length; i--;)
elementToHideList[i].parentNode.style.display = "none";
HIDING PARENT ELEMENT based on its child element. 根据子元素隐藏父母元素。
//Solution for the OP
//Update the **childB** with whatever you wanted to use as a child class with the parent element you wanted to hide.
//Note that this would only works if the parent element has a **className** mainDiv. You can change mainDiv with your own parent className.
$('.classB').closest('.mainDiv').hide();
You can do this with pure javascript: 你可以用纯javascript做到这一点:
var elementsChildB = document.getElementsByClassName("childB") for(var i = 0 ; i < elementsChildB.length ; i++){ elementsChildB[i].parentNode.style.display = "none" ; }
<div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div>
Or with Jquery: 或者使用Jquery:
$(".childB").parent().hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div> <div class="mainDiv"> <div class="childB"> b </div> </div> <div class="mainDiv"> <div class="childA"> a </div> </div>
Using jQuery you could use the following selector. 使用jQuery,您可以使用以下选择器。 This will hide all
mainDiv
containing childB
but not mainDiv
that contain other elements or childB
without a mainDiv
as its parent (in whichever level , by the use of closest
- https://api.jquery.com/closest/ ) : 这将隐藏所有
mainDiv
含childB
但不mainDiv
包含其他元素或childB
没有mainDiv
是其父母(在任何一个层面,通过使用closest
- https://api.jquery.com/closest/ ):
$(".childB").closest(".mainDiv").hide();
Fiddle: 小提琴:
$(function() { $(".childB").closest(".mainDiv").hide(); });
.childB { background-color: red; border: 1px solid black; height: 50px; margin-left:20px; } .childA { background-color: green; border: 1px solid black; height: 50px; margin-left:10px; } .mainDiv { background-color: yellow; border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainDiv"> <div class="childA"> </div> </div> <div class="mainDiv"> <div class="childA"> </div> </div> <div class="mainDiv"> <div class="childB"> </div> </div> <div class="mainDiv"> PARENT <div class="childA">Don't hide </div> </div> <div class="mainDiv"> PARENT <div class="childB">To be hidden </div> </div> <div class="mainDiv"> This contains a child A which contains a child B: <br /> <div class="childA">It is a child A <div class="childB">To be hidden </div> </div> </div> <div class="mainDiv"> <div class="childA"> </div> </div> <div class="childB">Should not be hidden </div>
Javascript Method Javascript方法
var childB = document.getElementsByClassName("childB");
for(var e = 0; e <= childB.length; e++){
childB[e].parentNode.style.display = "none";
}
JQuery Method JQuery方法
$('.childB').parent().hide();
Well, you can use .parent()
method to select the parent node of specified child nodes, and use .hide()
to hide the selected parent nodes. 好吧,您可以使用
.parent()
方法选择指定子节点的父节点,并使用.hide()
隐藏选定的父节点。
$('.childB').each(function() { $(this).parent().hide(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="mainDiv"> <div class="childA"> A </div> </div> <div class="mainDiv"> <div class="childA"> A </div> </div> <div class="mainDiv"> <div class="childB"> B </div> </div> <div class="mainDiv"> <div class="childA"> A </div> </div> <div class="mainDiv"> <div class="childB"> B </div> </div> <div class="mainDiv"> <div class="childA"> A </div> </div>
使用jQuery, $('.childA').parent().hide();
Grab all div of mainDiv class and loop for each can check children class has specific class !! 抓取所有div的mainDiv类和循环为每个可以检查子类有特定的类!
var main = document.getElementsByClassName("mainDiv");
for(var i = 0; i < main.length ; i++){
if(main[i].children[0].classList[0] == "childB"){ //assure only has one children
main[i].style.display = "none";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.