how we can check if all the div are displayed none

Question

I want to show message like NO result found if all div are set 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>

Who (which function) is responsible for hiding them? That function should know if there's no result. Just add the _"no results found"_ there. — Andreas, Mar 24 '21 at 13:43
if($(".a").is(":hidden")) should check all div with class 'a' is hidden or not — ssilas777, Mar 24 '21 at 13:53
@ssilas777 I always (incorrectly) assume that `.is()` only applies to first element, as otherwise it should be called `.are()` - **however** - from jquery docs: *Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.* - so it's not `.is()` or `.are()` but it's **actually** `.any()` (not `.all()` which is what would be required here) I guess `$(".a").is(":not(:hidden)")` might handle it or (from @Andreas 's link) `!$(".a").is(":visible")` — freedomn-m, Mar 24 '21 at 16:32

robertp · Answer 1 · 2021-03-24T14:45:44.587

A very quick example in vanilla JavaScript below selects the divs in your code example, and puts them in an array using querySelectorAll with class name selector.

The areAllDivsDisplayNone will return false, if any of the elements in the passed in array has display other than 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!');
}

I made my code example a bit more verbose, so it's easier to read.

how we can check if all the div are displayed none

1 Answers1