Question 36897 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Count divs with CSS style set to display: flex (not inline) and output the counted number in div as text – Jquery

This question is a party duplicate of an answer in jQuery count div that has display:block. I changed getElementsByTagName to getElementsByClassName and block to flex in the -if- statement.

Because I need the following functionality: Count the divs that are set with style display: flex in a separate stylesheet, so not inline, and then output the number count in a div; when the count is “0” output should be 0 in text, else the correct number of counted divs.

I am a beginner in Javascript and don’t know how I should continue.

Thank you.

$(function(){
    var allElems = document.getElementsByClassName('displayflex');
    var count = 0;
    for (var i = 0; i < allElems.length; i++) 
    {
        var thisElem = allElems[i];
        if (thisElem.style.display == 'flex') count++;
    }
    alert(count);
});
.displayflex {
  display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
    <div class="displayflex"></div>
    <div class="displayflex"></div>
    <div class="displayflex"></div>
    <div></div>
</div>
<div id="outputnumber"></div>
Tags:

3

Answers


  1. 0

    The problem is that the style attribute only reads inline styles. You will need to look at the computed styles of each element to see styles applied via CSS.

    Here using the appropriate const and let declarations for variables, a for...of loop for brevity, and updating the textContent of the relevant div with the result.

    $(function () {
  const allElems = document.getElementsByClassName('displayflex');
  
  let count = 0;
  for (const elem of allElems) {
    const compStyles = window.getComputedStyle(elem);
    if (compStyles.getPropertyValue('display') === 'flex') {
      count++;
    }
  }

  document.getElementById('outputnumber').textContent = count;
});
    .displayflex {
  display: flex;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
    <div class="displayflex"></div>
    <div class="displayflex"></div>
    <div class="displayflex"></div>
    <div></div>
</div>

<div id="outputnumber"></div>
    Login or Signup to reply.
  2. 0

    You need computed style like below

    $(function(){
    var allElems = document.getElementsByClassName('displayflex');
    var count = 0;
    for (var i = 0; i < allElems.length; i++) 
    {
        var thisElem = allElems[i];
        if (window.getComputedStyle(thisElem, null).display == 'flex') count++;
    }
    alert(count);
});
    Login or Signup to reply.
  3. 0 
    <html>
  <head>
  <title>Count div</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <style>
   .displayflex {
      display: flex;
    }
   </style>
  </head>
  <body>
   
    <div id="content">
      <div class="displayflex"></div>
      <div class="displayflex"></div>
      <div class="displayflex"></div>
      <div class="displayflex"></div>
      <div></div>
   </div>

    <div id="outputnumber"></div>
    <script>
        $('#outputnumber').html($('.displayflex').length);
    </script>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search