Modify object's css using jquery whilst iterating through array of objects

Question

How can I modify the css of an object when iterating through an array of objects? Here's my attempt:

var buttons = $('#nav li');
for(button in buttons){
    button.css("opacity","1");
}

But this gives the error:

Uncaught TypeError: Object 0 has no method 'css'
(anonymous function) 
k jquery-1.8.0.min.js:2
l.fireWith jquery-1.8.0.min.js:2
p.extend.ready jquery-1.8.0.min.js:2
D

button is set to the keys of the object or array, not the values -- JS for-in is not like PHP foreach. — Barmar
– Barmar, Commented Sep 20, 2013 at 23:52
ahh, that's why! $(buttons[button]).css("opacity","1"); works, thank you! — mbdavis
– mbdavis, Commented Sep 20, 2013 at 23:57
But the answer from undefined is the idiomatic way to iterate through a jQuery collection. — Barmar
– Barmar, Commented Sep 20, 2013 at 23:59

Ram · Accepted Answer · 2013-09-21 00:05:50Z

1

You don't have to iterate through the collection for setting css, jQuery does this for you:

$('#nav li').css('opacity','1');

You are calling the .css() method on all the keys of the jQuery object and not on the actual selected elements, jQuery returns a jQuery-wrapped array of selected elements, if you want to get the actual array of the elements, you can use .get() method and If you want to iterate through the collection, you can simply use the .each() method:

$('#nav li').each(function(index, element) {
   // ...
});

edited Sep 21, 2013 at 0:05

answered Sep 20, 2013 at 23:49

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Collectives™ on Stack Overflow

Modify object's css using jquery whilst iterating through array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related