在执行代码之前，如何遍历某些类的所有元素？

Question

Let's say i have a class "dog". I have 5 elements which all have the class "dog". I want to check if all the elements which have the class "dog" have a certain background-color. If they have i want to execute a certain code. I do NOT want to loop through each element and execute the code in between every iteration. What I want is to first check ALL the elements that do they have the certain background-color before executing a code.

I tried this:

function openBtn () {
  green = 'rgb(144, 238, 144)';

  if ($('.glassver').css('background-color') == green || $('.glasshor').css('background-color') == green || $('.glassxyz').css('background-color') == green) {
    $('#orderBtn').removeAttr('disabled', 'disabled');
    $('#orderBtn').css("background-color", "#3da669");
  } else {
    $('#orderBtn').attr('disabled', 'disabled');
    $('#orderBtn').css("background-color", 'lightgray');
  }
}

Answer 1

Get all the div elements which have dog class and build an array from them.

Then use the every method of array to check your background color condition. If it is true for all of them, execute your code

 const dogs = Array.from(document.querySelector('div.dog')); if (dogs.every(d => d.style.backgroundColor === 'red')) { console.log('do some code'); } 

 <div class="dog" style="background-color:red">DOG 1</div> <div class="dog" style="background-color:red">DOG 2</div>