CODEWITHSUNDEEP
javascriptcss
jake
jake

Reputation: 136

How to get length of elements in a loop with specific style property values

How can I get the length of the elements of loop which has the inline style property opacity value '1' in pure javascript. I want to capture them with inline style property values only but not with assigning any classNames because for future purpose i may want to capture them with different attribute values or different style property values too. Is there any chance of getting the elements by using something like this document.querySelectorAll("li[style*='opacity:1']")

<ul id="all" class="select">
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
   <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
</ul>
<script>
   var elem = document.querySelectorAll("li");

   // var elem = document.querySelectorAll("li[style*='opacity:1']");

         for (var i = 0; i < elem.length; i++) {
             if(elem[i].style.opacity == 1){
                 console.log(elem[i].length);
             }
         }
</script>

Upvotes: 1

Views: 57

Answers (2)

sssurii
sssurii

Reputation: 830

You can try like this:

var elements = document.querySelectorAll('li[style="opacity: 1; display:inline-block;"]');

Considering every element has display:inline-block; too.

Upvotes: 0

mankowitz
mankowitz

Reputation: 2051

Maybe you want something like this? It's not that much better than what you have.

var elem = Array.from(document.querySelectorAll("li")).filter(el => el.style.opacity == 1);

console.log (elem.length);
<ul id="all" class="select">
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 0; display:inline-block;">text</li>
  <li class="someclass" style="opacity: 1; display:inline-block;">text</li>
</ul>

Upvotes: 2

Related Questions