JQuery not a function error

Question

While developing with Firebug I keep getting this error.

pages[x].css("z-index",x) is not a function

The function itself works fine but I'm trying to figure out why it keeps flagging this. The function is simultaneously reorganizing the array and the z-indexes. Can i not access array variables and call functions on them like this or is this something else?

full code:

var pages = $("#use-wrapper").children("div");

pages.children("a.right").click(function(event) {
    event.preventDefault();
    $(this).parent("div").css("z-index","0");
    pages.push($(this).parent("div"));

    for(var x = pages.length; x >= 1; --x) {
        pages[x] = pages[x-1];
        pages[x].css("z-index",x);
    }
    pages[0] = pages.pop();
});

Answer 1

If you do an alert(pages[x]), you'll find that each pages[x] is a DOM element and not a jQuery object, which is why you get the error that pages[x].css is not a function. You probably want to do:

$(pages[x]).css('z-index', x);

Edit: Even though jQuery lets you access the elements of pages as though it's an array, it's not a true array object, so I doubt that push and pop will work too.