我有這個 HTML 塊
<div class="abc">
<div class="xyz" style="display: none;">xyz</div>
<div class="xyz" style="display: none;">xyz</div>
<div class="xyz" style="display: none;">xyz</div>
</div>
<div class="abc">
<div class="xyz" style="display: none;">xyz</div>
<div class="xyz" style="display: none;">xyz</div>
<div class="xyz" style="display: block;">xyz</div>
<div class="xyz" style="display: block;">xyz</div>
</div>
如果它包含所有“顯示：無” div，我想隱藏所有父 div，否則我想顯示父 div ..
uj5u.com熱心網友回復：
此代碼使用純 JavaScript。首先，您將獲得該類所有元素的abc串列，并為其子項創建串列。然后你迭代它們并檢查display除none. 如果父母的孩子都經歷過，那么none您最后將父母設定為display: none否則您只會打破回圈。
let abc = document.getElementsByClassName("abc");
let breaker;
for(i = 0; i < abc.length; i ) {
let children = abc[i].children;
for(x = 0; x < children.length; x ) {
let child = children[x];
if(child.style.display != "none") {
breaker = true;
} else { breaker = false }
}
if(breaker == true) {continue}
abc[i].style.display = "none"; // Comment out to see effect
}
我在小提琴中添加了簡單的 CSS 來展示它。把最后一行注釋掉就abc[i].style.display = "none";可以確認效果了。
https://jsfiddle.net/h40f8L6o/42/
uj5u.com熱心網友回復：
使用 Jquery 像這樣嘗試。
$(".abc").map(function(){
let flag = true;
$(this).find(".xyz").map(function(){
if($(this).css("display") != "none"){
flag = false;
}
});
if(flag){
$(this).css("display", "none");
}else {
$(this).css("display", "block");
}
})
uj5u.com熱心網友回復：
檢查孩子是否都顯示無：
let parentDiv = // get parent div
let childDivs = parentDiv.childNodes;
let hideParent = true;
for(let i = 0; i < childDivs.length; i ){
if(childDivs[i].style.display != "none"){
hideParent = false;
break;
}
}
如果是這樣，隱藏父母：
if(hideParent){
parentDiv.style.display = "none";
}
uj5u.com熱心網友回復：
我沒有看到任何直接的 CSS 屬性可以在這里解決問題。您可以使用 ES 來實作這一點，
const parentDiv = document.getElementsByClassName("abc");
Array.prototype.forEach.call(parentDiv, function (pDiv, i) {
let isAllDisplayNone = true;
Array.prototype.forEach.call(pDiv.children, function (cDiv, j) {
if(cDiv.style.display === "block") {
isAllDisplayNone = false;
}
});
if(isAllDisplayNone === true)
pDiv.style.display = "none";
});
迭代所有父項和子項以確定是否所有子項都不顯示。如果是這樣隱藏父元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/406151.html
標籤：
上一篇：從父級過濾子html元素