CODEWITHSUNDEEP
javascriptjquerycss
Boris
Boris

Reputation: 31

Count children elements with inline style

I'm stuck on how to get number of all elements that has inline style.

var galleryElements = document.getElementsByClassName("popup-gallery")[0].children;

    $('.myButton').click(function() {
    
        var totalItems = galleryElements.length;
        var itemsWithStyle = ($(galleryElements).css('display') == 'inline').length;
        
        if (totalItems == itemsWithStyle){
            /* do something */
        }
    });

Upvotes: 1

Views: 405

Answers (5)

async await
async await

Reputation: 2395

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
);

Upvotes: 0

Kinglish
Kinglish

Reputation: 23654

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>

Upvotes: 0

Robo Robok
Robo Robok

Reputation: 22693

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.

Upvotes: 0

funtkungus
funtkungus

Reputation: 246

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."

Upvotes: 0

Leshawn Rice
Leshawn Rice

Reputation: 548

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.

Upvotes: 1

Related Questions