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

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match

Can you help me understand how to ensure the CSS translate feature lands in a specific div, no matter its initial position?

Customize the popover in React Material-UI to your liking

Preventing the Rendering of Inline-Block Whitespace in Web Browsers

The argument type does not match the parameter type partial<>

What is the best way to send a React prop that is buried deep within a JSON structure?

Looking to include a badge within the nebular menu

Assigning multiple identifiers to a single element

Understanding the timing of records being returned via an Observable in Angular's ngOnInit

"Implement a function to append a new item to all JSON objects in an array if they share a common value with a different JSON object in the array using

Why does the lazy loading feature keep moving the background image around?

Troubleshooting Symfony2 and Assetic: Why are my CSS-linked images not loading?

Column div being obscured by footer

Is there a way to modify the background color of a button once it has been clicked, specifically using JavaScript?

The CSS menu dropdown fails to function properly on desktop view when there is longer content present

Use JQuery's $ajax to exclusively retrieve items that have a date prior to the current date

Triggering event within the componentDidUpdate lifecycle method

When clicking on the material-ui autocomplete feature in a React JS application, a blank page unexpectedly opens

Is there a way to shift this div to the bottom and incorporate some quirky pop-up squares?

PHP is used to receive JSON data sent via Ajax for fetching information