javascript - 如何在隐藏的 parent 中找到可见的 child

Question

我想显示一个 div，其中包含可见的错误消息范围。我尝试了以下代码，但它仅在容器可见时有效，否则无法在其中找到。

谁能分享一下原因和解决方法？

代码1:

使用 .length

$(".has-warning:visible").each(function() {
    var id = this.id;
    var divs = ["wReq_div", "mcatIsq_div", "glDetail_div"];
    for (var i = 0; i < divs.length; i++) {
            if ($("#" + divs[i] + " #" + id).length) {
                    console.log("found in " + divs[i]);
                    return false;
            }
    }
});

如果容器可见则为真，否则不可见。

代码2:

使用 $.contains

$(".has-warning:visible").each(function(){
  var id = this.id;
  var divs = ["wReq_div","mcatIsq_div","glDetail_div"];
  for(var i=0;i<divs.length;i++){
    if($.contains($("#"+divs[i])[0],$("#"+id)[0])){
        console.log("found in " + divs[i]);
        return false;
    }
  }
});

它也只有在容器可见时才有效。

所以我的主要问题是:

1. Parent 是隐藏的，child 有 display 而不是 none，如何在隐藏的 parent 中找到显示的 child
2. 找到哪个父 div(隐藏)具有给定 ID 的错误 div，以便我可以显示该父 div。

这是 CodePen

我不想使用将类从隐藏类更改为可见类的方法来显示我的 errorMsg，因为我必须在多个文件中进行大量更改。

Answer 1

来自文档

jQuery( ":visible" )

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

如果父项被隐藏，它的所有子项也将被隐藏。因此，$(".has-warning:visible") 不会返回子元素，即使它们未 隐藏。您需要依赖子元素的显示属性，而不是 :visible 属性，然后尝试这样的操作，

function checkMsg1(){
  $(".has-warning").each(function() {
    var id = this.id;
    var i=0;
    var divs = ["wReq_div", "mcatIsq_div", "glDetail_div"];
    for (i = 0; i < divs.length; i++) {
            if ($("#" + divs[i] +" #"+id).css("display") !== 'none') {
                $("#" + divs[i]).show();    
            }
    }
  });
}