Change CSS on Multiple Javascript Variables

Question

Quick question everyone. I know you can select multiple elements with jQuery and change CSS properties in one line of code, like this:

        $("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2").css({ 'position' : 'absolute', 'opacity' : '0'});

But recently I was listening to the ShopTalk Podcast, during which they mentioned that it's a better idea to assign all of your DOM lookups to variables at the beginning of your Javascript file, and then use that variable throughout your file. This I did, and but when I got to the point where I needed to change the CSS of all those elements, I realized I couldn't think of another way to do so besides writing a single line for each element, like this:

    n2.css({ 'position' : 'absolute', 'opacity' : '0'});
    n3.css({ 'position' : 'absolute', 'opacity' : '0'});
    n4.css({ 'position' : 'absolute', 'opacity' : '0'});
    n5.css({ 'position' : 'absolute', 'opacity' : '0'});
    n6.css({ 'position' : 'absolute', 'opacity' : '0'});

Is there a more concise way to change the css of all these variable equivalent to the one-line jQuery way? I could make an array and iterate through them I guess, but that almost defeats the performance point of not performing multiple DOM lookups on the same item...

I'm sure there's something simple I forgetting for this, thanks!

maybe they didn't mean literally assign all your different elements individually to separate variable. It should be more flexible than that, based on your intended usage. So maybe assign a single variable at the beginning which encompasses all those elements, if you want to act on them as a single group later (and especially if you want to do it more than once during the script) — ADyson
– ADyson, Commented Jul 24, 2016 at 22:15

Community · Accepted Answer · 2017-05-23 11:44:22Z

5

Easy Solution:

If you have already multiple variables defined, you can select them all with a jQuery selector function, and then just perform the CSS on that one selector:

$([ n2, n3, n4, n5, n6 ]).each(function() {
    $(this).css({ 'position' : 'absolute', 'opacity' : '0'});
});

Update: Edited above exaple to work. Must iterate over this with an each() function.

Alternative Solution:

If you have to a similar operation multiple times, either:

Select all of the elements into a single jQuery variable like the other answers say (inflexible solution).
Add a common class to all the variables and then operate on that class (dynamic solution).

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jul 24, 2016 at 22:11

Jonathan Lam

17.5k17 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jake Evans Over a year ago

So I tried your example, but it didn't work until I did a .each() first, and then a $(this).css() inside the function.

Jonathan Lam Over a year ago

@JakeEvans If this solved your problem, consider accepting to show the community that it helped!

Marko Mackic · Accepted Answer · 2016-07-24 22:09:29Z

1

What they meant was probably this, you use variable example to store the query, and then use it where you need it so the code would be like this :

var example = $("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2")

 // when you need to change props of elements selected by query in example you use : 

 example.css({ 'position' : 'absolute', 'opacity' : '0'});

answered Jul 24, 2016 at 22:09

Marko Mackic

2,3431 gold badge12 silver badges19 bronze badges

1 Comment

Marko Mackic Over a year ago

You see the text after it , to assign all DOM lookups to a variable , and then use that variable instead. That's exactly what they were talking about, not to split it to variables for each custom-*-*-* :)

Lunster · Accepted Answer · 2016-07-24 22:16:43Z

1

they mentioned that it's a better idea to assign all of your DOM lookups to variables at the beginning of your Javascript file

More accurately, it's a good idea to cache your document queries in the initialization area of your code.

The difference is subtle. Also your question almost makes it sound like you're caching each element individually in variables - there's no need to do that. You can "cache" the jQuery result set by just assigning it to a variable, and then you can reuse that as long as the structure of your document remains the same.

jQuery will still need to update the DOM to alter CSS, the difference is it won't have to search for those elements again if you operate on the cached variable. There's no need to operate on the elements individually in this case, jQuery will handle that for you.

All of your elements are referenced by id, so the lookups will be quite fast anyway. Worry about your code making logical sense before optimizing too much.

answered Jul 24, 2016 at 22:16

Lunster

9246 silver badges17 bronze badges

2 Comments

Jake Evans Over a year ago

Thanks for the nuanced explanation. Any idea why selecting by ID is quite fast? Is a lookup by class significantly slower?

Lunster Over a year ago

Lookup by id is usually faster because it's a unique identifier, and this can be optimized for searches by a compiler. Internally, jQuery normally uses the browser native getElementById(), instead of slower CSS style selector query lookups. Modern browsers are very fast at doing these searches, but #id is the fastest. Class lookups are slower for several reasons - they can return many results, but in small applications they're nothing to worry about.

Jake Evans · Accepted Answer · 2016-07-24 22:30:18Z

1

Got this to work thanks mostly to Jonathan Lam's response. Here's what worked for me:

$([ n2, n3, n4, n5, n6 ]).each(function() {
        $(this).css({ 'position' : 'absolute', 'opacity' : '0'});
});

answered Jul 24, 2016 at 22:30

Jake Evans

3176 silver badges19 bronze badges

Comments

Massimiliano Carosi · Accepted Answer · 2016-07-24 22:11:06Z

0

The point is that you have to reduce the number the dom queries, because they "cost". But the logic is just the same:

instead of

$("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2")
    .css({ 'position' : 'absolute', 'opacity' : '0'});

do

var elements = $("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2")

at the beginning of your code and use that variable when needed:

elements.css({ 'position' : 'absolute', 'opacity' : '0'});

please consider also to use a simpler query, for example a common class name, instead of all that distinct ids, if possible. It's more readable and efficient.

answered Jul 24, 2016 at 22:11

Massimiliano Carosi

2944 silver badges20 bronze badges

Comments

Gunchars · Accepted Answer · 2016-07-24 23:41:32Z

0

jQuery will still use a for loop to set the inline styles on all elements, that part is unavoidable. As you and others have mentioned, you can get better performance by caching the lookups, though in this case these are ID lookups which are plenty fast already - $("#hello") is much faster than $(".hello"). What you can do though is, if possible, avoid using inline styles like in your example and create a class that you add/remove to all of the matching elements:

$("#hello1, #hello2, #hello3").addClass("invisible")

answered Jul 24, 2016 at 23:41

Gunchars

11.2k4 gold badges31 silver badges28 bronze badges

Collectives™ on Stack Overflow

Change CSS on Multiple Javascript Variables

6 Answers 6

2 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related