Is there a way to confirm if all div elements have a designated background color?

Question

Is there a way to confirm if all div elements have a designated background color?

I have a scenario where I have dynamically added several divs with a specific class to my webpage. These divs change color when the user hovers over them. I am trying to trigger a specific function once the last div has been set to a particular background color, but despite my efforts, I have not been successful so far. Any insights or help would be greatly appreciated. Here is the code snippet from my latest attempt:


var counter=0;
$(".orb").each(function () {
    if ($(this).css("background-color") === "#ede74a") {
        counter=counter+1;
    }
});
if (counter === orbarray.length) { //all backgrounds have been set
    executeFunction();
}

javascript jquery html css

Answer 1

Answer №1

To simplify things, consider adding a class to the elements and keeping track of that class.

$(document).on('mouseenter','.orb',function(){ 
    var $orb = $(".orb"); 
    $(this).addClass('hovered');
    if($orb.filter('.hovered').length === $orb.length){
       alert('All hovered!');
       executeFunction();
    }
});

The mentioned colors are unclear, but this method can be adjusted for multiple classes if necessary.

Keep in mind that browsers store colors as either rgb or rgba, not as hex values.

Answer 2

To simplify things, consider adding a class to the elements and keeping track of that class.

$(document).on('mouseenter','.orb',function(){ 
    var $orb = $(".orb"); 
    $(this).addClass('hovered');
    if($orb.filter('.hovered').length === $orb.length){
       alert('All hovered!');
       executeFunction();
    }
});

The mentioned colors are unclear, but this method can be adjusted for multiple classes if necessary.

Keep in mind that browsers store colors as either rgb or rgba, not as hex values.

Answer 3

Answer №2

The code you've provided lacks clarity regarding the value of orbarray. It's also unusual that you are checking the equality of counter with the length of that array outside of the $.each() callback.

However, if I understand correctly, you want to trigger a specific function when the last <div> is hovered over. This indicates the need for an event handler for the mouseenter event, and then verifying in that handler whether all elements have been hovered over. Using a class instead of inline CSS will provide a more efficient way to track hovered elements.

Consider the following example:

function checkOrbs() {
  var $orbs = $('.orb'),
      $activeOrbs = $orbs.filter('.active');

  if ($orbs.length === $activeOrbs.length) {
    executeFunction();
  }
}

$('.orb').on('mouseenter', function(e) {
  var $target = $(e.target);

  $target.addClass('active');

  checkOrbs();
});

Simply apply your background color using CSS:

.active {
  background-color: #ffcc00;
}

Answer 4

The code you've provided lacks clarity regarding the value of orbarray. It's also unusual that you are checking the equality of counter with the length of that array outside of the $.each() callback.

However, if I understand correctly, you want to trigger a specific function when the last <div> is hovered over. This indicates the need for an event handler for the mouseenter event, and then verifying in that handler whether all elements have been hovered over. Using a class instead of inline CSS will provide a more efficient way to track hovered elements.

Consider the following example:

function checkOrbs() {
  var $orbs = $('.orb'),
      $activeOrbs = $orbs.filter('.active');

  if ($orbs.length === $activeOrbs.length) {
    executeFunction();
  }
}

$('.orb').on('mouseenter', function(e) {
  var $target = $(e.target);

  $target.addClass('active');

  checkOrbs();
});

Simply apply your background color using CSS:

.active {
  background-color: #ffcc00;
}

Is there a way to confirm if all div elements have a designated background color?

Answer №1

Answer №2

Similar questions

How can I alter the div once the form has been submitted?

Transition within Vuejs moves forwards and backwards, with a unique feature that allows it to skip directly to

sending functions into angular as opposed to using 'function()'

Apply a border to the input field when the user enters or leaves the field, only if the value is

Launching an external JavaScript from within a separate JavaScript file

Welcome Message using Discord.js V13

Vue does not consistently update HTML when the reference value changes

Is there a way to locate an element within innerHTML using getElementById?

Choose the list item by identifying the corresponding unordered list

Keep the table header in place while scrolling

Updating the HTML class with JavaScript

What is the reason for receiving a prohibited token?

How can we solve the issue of missing props validation for the Component and pageProps in _app.js?

How to integrate a jQuery plug-in into your Meteor 1.7.0.3 project

Using a percentage width on a <div> element with the "overflow-x: scroll" property does not seem to be functioning properly, even when encapsulated within

Generate HTML content based on the permissions from a REST API

Utilizing ScrollView Component in React Native

`Enter` within a container

It is not possible for me to modify the attributes in responsive mode without first generating a new class within the tag

Guide to setting up a datePicker in a cellEditorSelector