Count children elements with inline style

Say I have a NodeList of the children of some div, i.e.

const div = document.querySelector('#target');
const children = div.children;

If I want to get the number of children with the display attribute set to inline, then I can iterate through children and increment a counter each time I encounter a child element with the display attribute set to inline.

For example:

let count = 0;
for (let child of children) {
  if (child.style.display === 'inline') count++;
}

Where count represents the number of child elements of the parent div that have a display attribute set to inline.

This will give you a tally of both inline (including inline-block) and other. If there is a class associated with the element, it will report back that as well.

$('.myButton').click(function() {
  let inline = [],  block = []
  $('.popup-gallery *').each(function() {
    let tg = $(this).prop('tagName').toLowerCase()
    if ($(this).attr('class')) tg += "." + $(this).attr('class');
    if (['inline','inline-block'].includes($(this).css('display'))) inline.push(tg)
    else block.push(tg)
  })
  console.log('inline',inline)
  console.log('not-inline',block)
  console.log('inline/total',inline.length + "/" + (inline.length + block.length))
  console.log('has inline elements?',inline.length>0)
});

.special{
display:inline;
}

.special-ib{
display:inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='popup-gallery'>
  <div>A div
    <ul>
      <li>li list - <i>italics...</i></li>
    </ul>
  </div>
  <div class='special'>inline div</div>
  <div class='special-ib'>inline-block div</div>
  <p>paragraph</p>
  <span>span, <dd>dd</dd></span>
</div>

<button class='myButton'>Click me </button>

You are in fact checking if all gallery elements are display: inline, so you can simplify your code a bit:

const $galleryElements = $('.popup-gallery').first().children();

$('.myButton').click(function() {
    const areAllInline = $galleryElements.filter(function () {
        $(this).css('display') !== 'inline';
    }).length === 0;
        
    if (areAllInline) {
        /* do something */
    }
});

If there are no elements with display different than inline, you're good to go.

this is without jquery

You can check this out for starters: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

basic

<h1 id="hello">index.html</h1>

<-- css -->

#hello {display: inline;}

// js

const title = document.getElementById('hello');
let res = window.getComputedStyle(title)
let count = 0;

if(res.getPropertyValue('display') === 'inline') {
    console.log('yes')
    count ++;
    console.log(count)
// 1
}

what I learned: " The object from getComputedStyle is read-only, and should be used to inspect the element's style — including those set by a element or an external stylesheet. The element.style object should be used to set styles on that element, or inspect styles directly added to it from JavaScript manipulation or the global style attribute."

These answers are good, however I feel it is even easier than how others are solving this problem.

console.log(
  [...document.querySelectorAll(".popup-gallery")]
    .filter(element => 
      "inline" == 
      window.getComputedStyle(element)
        .getPropertyValue("display")
    ).length
);