我们如何检查所有 div 是否显示为 none

如何解决我们如何检查所有 div 是否显示为 none

如果所有 div 都设置显示无，我想显示类似 NO result found 的消息

element.each(function(i,el) {
    if (all element set display:none) {
        no result found
    }
}

<div class="a" data-key="a" style="display:none"></div>
<div class="a" data-key="a" style="display:none"></div>
<div class="a" data-key="a" style="display:none"></div>
<div class="a" data-key="a" style="display:none"></div>
<div class="a" data-key="c" style="display:none"></div>
<div class="a" data-key="c" style="display:none"></div>

解决方法

下面的 vanilla JavaScript 中的一个非常简单的示例在您的代码示例中选择 divs，并使用 querySelectorAll 和 class name 选择器将它们放入一个数组中。

如果传入数组中的任何元素具有 areAllDivsDisplayNone 以外的 false，则 display 将返回 none。

const areAllDivsDisplayNone = (divs) => {
  let allDisplayNone = true;
  for (let i in divs) {
    if (divs[i].style.display !== 'none') {
      allDisplayNone = false;
      break;
    }
  }
  return allDisplayNone;
};

const els = Array.from(document.querySelectorAll('.a'));
const results = areAllDivsDisplayNone(els);

if (results) {
  console.log('Results!');
} else {
  console.log('No results!');
}

我把我的代码示例写得更冗长，所以更容易阅读。