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

Answer 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) {
   // ...
});