Looping an Array in jQuery to change CSS

Question

I have an array of elements (their ID's).

stage1check("htmlelement1", "htmlelement2", "htmlelement3");

These are input fields on a form, How can I change their background colour to red with jQuery? I have tried many times today but I always get an error.

 jQuery(stage1check).each(function() {
            console.log("else executed");
            // highlight stage 1 red (required empty fields)    
        });

Scratching my head... how do I like jQuery("#" + stage1check[i]).css("background-color:red;");for each one?

See css(). "This method can take either a property name and value as separate parameters, or a single object of key-value pairs." e.g. .css('background-color','red') or .css({'background-color':'red'}). Alternatively, use addClass() and define a CSS class with background-color:red;. Arguably, instead of using IDs, apply the same class to all elements and set background-color:red for that class. — showdev
– showdev, Commented Oct 10, 2018 at 0:05
You say stage1check is an array, but the first code looks to imply that it's a function...? — CertainPerformance
– CertainPerformance, Commented Oct 10, 2018 at 0:05
I just wrote the array out my actual array is working @CertainPerformance — mitchelangelo
– mitchelangelo, Commented Oct 10, 2018 at 0:08
You might want to clarify that then, eg change to const stage1check = ["htmlelement1", "htmlelement2", "htmlelement3"]; — CertainPerformance
– CertainPerformance, Commented Oct 10, 2018 at 0:10

showdev · Accepted Answer · 2018-10-10 00:27:09Z

Two issues were mentioned in comments:

The syntax for the array is not valid.
The syntax for css() is not valid.

Also, as mentioned by msg, iteration might not be necessary as you can select a jQuery collection of all the IDs and apply the css to that collection.

var stage1check = ["htmlelement1", "htmlelement2", "htmlelement3"];

jQuery('#' + stage1check.join(',#')).css({
  'background-color': 'red'
});

div {
  margin: 0 0 .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="htmlelement1">1</div>
<div id="htmlelement2">2</div>
<div id="htmlelement2b">2b</div>
<div id="htmlelement3">3</div>

Alternatively, use a class:

var stage1check = ["htmlelement1", "htmlelement2", "htmlelement3"];
jQuery('#' + stage1check.join(',#')).addClass('selected');

div {
  margin: 0 0 .5em;
}

.selected {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="htmlelement1">1</div>
<div id="htmlelement2">2</div>
<div id="htmlelement2b">2b</div>
<div id="htmlelement3">3</div>

Emily · Accepted Answer · 2018-10-10 00:18:08Z

0

If it is a normal JS array, you can just use forEach():

yourArray.forEach((element) => {
  jQuery("#" + element).css('background-color','red');
});

answered Oct 10, 2018 at 0:18

Emily

2011 silver badge4 bronze badges

3 Comments

mitchelangelo Over a year ago

Thanks for your help, what does the (element) represent?

mitchelangelo Over a year ago

Is it the number of the item in array?

showdev Over a year ago

@Scott It's the current iteration's value from the array. So, forEach passes each value from the array to its function, one-by-one, as the variable "element". See forEach(). Also, the () => {} format is called an arrow function.

RobG · Accepted Answer · 2018-10-10 00:21:16Z

0

You can use jQuery's .each and .css methods. Note that the parameters for each are in a different order to forEach.

.each isn't needed though if using .css:

/*
$('[id^="d"]').each((i, node) =>
  $(node).css('background-color','red')
);
*/

$('[id^="d"]').css('background-color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>

You can also do it with plain js:

document.querySelectorAll('[id^="d"]').forEach(node =>
  node.style.backgroundColor = 'red'
);

<div id="d0">d0</div>
<div id="d1">d1</div>
<div id="d2">d2</div>

edited Oct 10, 2018 at 0:21

answered Oct 10, 2018 at 0:18

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

msg Over a year ago

You don't actually need the .each, .css works on collections.

Collectives™ on Stack Overflow

Looping an Array in jQuery to change CSS

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related