Question

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

有人可以分享原因和解决方案吗？

代码1：

$(".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;
            }
    }
});

如果该容器可见，则为true。否则为

代码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;
    }
  }
});

只有在容器可见的情况下它也可以工作。

所以我的主要问题是：

父级已隐藏，子级为display而不是none，如何在隐藏的父级中找到显示的子级
要查找哪个父div（隐藏）具有给定ID的错误div，以便我可以显示该父div。

这里是CodePen

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

Answer 1

来自文档

jQuery（“：visible”）

如果元素占用了文档中的空间，则认为它们是可见的。可见元素的宽度或高度大于零。

如果父母被隐藏，那么所有的孩子也将被隐藏。因此，$(".has-warning:visible")不会返回子元素，即使它们被not隐藏。您需要依靠子元素的显示属性，而不是：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();    
            }
    }
  });
}

Answer 2

我使用以下代码来克服此问题，请提出建议，以解决此问题：

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

但是它会首先选择所有div，并可能会增加时间。

Answer 3

您将找不到.has-warning:visible，因为其父项不可见。但是您可以检查父div是否隐藏。

$(".has-warning").each(function() {
  if($(this).css("display") != "none"){
      var id = this.id;
      var i=0;
      var divs = ["wReq_div:hidden", "mcatIsq_div:hidden", "glDetail_div:hidden"];
      for (i = 0; i < divs.length; i++) {
          if ($("#" + divs[i] + " #" + id).length) {
               alert("found in " + divs[i] + " " + id);
               // Add code to display that div
          }
          else {
              alert("not found in " + divs[i]+ " " + id);
          }
      }
   }
});

如何在隐藏的父母中找到可见的孩子

代码1：

代码2：

3 个答案: