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

Question

如果所有div都设置了display none,我想显示类似“找不到结果”的消息

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>

Answer 1

下面的vanilla JavaScript中的一个非常快速的示例选择代码示例中的divs，并使用QuerySelectorAll和Class Name选择器将它们放入数组中。

如果传入数组中的任何元素具有displaynone而不是none,则AreAllDivsDisplaynone将返回false。

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!');
}

我使我的代码示例更详细一些，所以更容易阅读。