如果所有孩子都是“显示：无”，我该如何隐藏父 div

Question

我有这个 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 ..

Answer 1

此代码使用纯 JavaScript。 首先，您将获得 class abc的所有元素的列表，并为其子项创建列表。 然后你迭代它们并检查除none以外的任何display值。 如果父母的孩子所有 go 都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/

Answer 2

检查孩子是否都显示无：

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";
}

Answer 3

使用 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");
    }
})

Answer 4

我没有看到任何直接的 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";
        
    });

迭代所有父项和子项以确定是否所有子项都不显示。 如果是这样隐藏父元素。