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!

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!

• javascript
• jquery
• html
• css
• performance

Share Improve this question Follow asked Jul 24, 2016 at 22:05 Jake EvansJake Evans 31766 silver badges1919 bronze badges 1

• 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 enpasses 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 Commented Jul 24, 2016 at 22:15

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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:

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

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'});

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.

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'});
});

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 mon class name, instead of all that distinct ids, if possible. It's more readable and efficient.

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")