Check if all elements in array are the same value with jQuery

Question

I need to check (with jQuery) if all 'li' in a list has style="display: none", but I'm a little lost.

<ul class="thumbs">
  <li style="display: none;">Element 1</li>
  <li style="display: none;">Element 2</li>
  <li style="display: none;">Element 3</li>
  <li style="display: none;">Element 4</li>
  <li style="display: none;">Element 5</li>
</ul>

var $el = $('.thumbs li');
var elStyle = $el.map(function() {
   return $(this).attr('style');
});

console.log(elStyle);

https://jsfiddle.net/r2rwe2nw/

Possible duplicate of [Check if all values of array are equal](http://stackoverflow.com/questions/14832603/check-if-all-values-of-array-are-equal) — R3tep, Sep 13 '16 at 14:35
Simply check the count of visible element `$('.thumbs li:visible').length == 0` — Pranav C Balan, Sep 13 '16 at 14:36
@PranavCBalan There are so many things in my head that did not remember the obvious ... haha . Thank you! — Rodrigo Dias, Sep 13 '16 at 14:40

score 0 · Answer 1 · answered Sep 13 '16 at 14:36

Instead of using map, try filtering the list elements based on their CSS properties and checking the length of the resulting array:

var visibleElements = $('.thumbs li').filter(function(item) {
  return this.style.display !== 'none';
});

console.log(visibleElements.length > 0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="thumbs">
  <li style="display: none;">Element 1</li>
  <li style="display: none;">Element 2</li>
  <li style="display: none;">Element 3</li>
  <li style="display: none;">Element 4</li>
  <li style="display: none;">Element 5</li>
</ul>

Check if all elements in array are the same value with jQuery

1 Answers1