如何检查具有特定类名的元素是否可见？

Question

我想检查是否有任何具有 Classname settingsBox的元素可见。 我创建了这个 function，但它不起作用：

function noOptionsOpen(){
    $(".settingsBox").each(function (){
        if ($(this).is(":visible")) return false;
    })
    return true;
}

我猜，如果这个类名有任何可见的东西，内部 Function 会返回 fals，但是在跳出它之后，它仍然总是返回 true，对吧？ 我只是不知道我该如何解决？

Answer 1

问题是因为您无法从 each() 中的匿名处理程序 function 中的noOptionsOpen() each()返回。 解决这个问题的一种方法是定义一个变量并在循环中更新它，然后返回它：

function noOptionsOpen() {
  let optionsOpen = true;
  $(".settingsBox").each(function() {
    if ($(this).is(":visible")) 
      optionsOpen = false;
  })
  return optionsOpen;
}

更好的方法是在单个选择器中使用:visible并检查length属性。 这几乎使 function 变得多余，但取决于您的用例：

function noOptionsOpen() {
  return $(".settingsBox:visible").length === 0;
}

// As above in ES6:
let noOptionsOpen = () => $(".settingsBox:visible").length === 0;

Answer 2

那？

 const isHidden = el => (window.getComputedStyle(el).getPropertyValue('visibility')==='hidden'), noOptionsOpen = classN => [...document.querySelectorAll(`.${classN}`)].some(isHidden); console.log( 'some elements are not visible? -> ', noOptionsOpen('settingsBox') )

 #parent >div:nth-of-type(3) { visibility: hidden; }

 <div id="parent"> <div class="settingsBox">aa</div> <div class="settingsBox">bb</div> <div class="settingsBox">cc</div> <div class="settingsBox">dd</div> <div class="settingsBox">ee</div> </div>