jquery .css() not working

Question

I don't know why when I use the .css() function of jQuery it returns me this:

 Uncaught TypeError: undefined is not a function

My code is this:

HTML:

<div class="photo1 sliderPhoto">d</div>
<div class="photo2 sliderPhoto">d</div>
<div class="photo3 sliderPhoto">d</div>
<div class="photo4 sliderPhoto">d</div>

CSS:

.sliderPhoto{
    position: absolute;
    top: 0px;
    left: 0px;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.photo1{
    background-image: url('../photos/ph1.jpg');
    z-index: 6;
}
.photo2{
    background-image: url('../photos/ph2.jpg');
    z-index: 6; 
    display: none;
}
.photo3{
    background-image: url('../photos/ph3.jpg');
    z-index: 6;
    display: none;
}
.photo4{
    background-image: url('../photos/ph4.jpg');
    z-index: 6;
    display: none;
}

JQuery on $(document).ready:

$photos = [$(".photo1")[0], $(".photo2")[0], $(".photo3")[0], $(".photo4")[0]];
$photos[0].css("z-index");

when I type this jQuery code it doesn't work :( but this $photos[0] returns the exact div I need.

Answer 1

$photos[0].css("z-index");

Should be:

$($photos[0]).css("z-index");

You have to convert DOM element back into a jQuery Object to use jQuery function.

Alternatively, it may be more efficient to simply filter the element using jQuery so that no conversion is required -

$photos.first().css("z-index");

See http://api.jquery.com/first/ for more details on the .first() method