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

时间:2021-03-24 13:40:05

标签: html jquery

如果所有 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>

1 个答案:

答案 0 :(得分:0)

下面的 vanilla JavaScript 中的一个非常简单的示例在您的代码示例中选择 divs,并使用 querySelectorAllclass 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!');
}

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