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:

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 does not work :( but this $ photos [0] returns the exact div I need.

Answer 1

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

Must be:

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

You need to convert the DOM element back to a jQuery object in order to use the 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");

More on the .first () Method

see http://api.jquery.com/first/ .

Answer 2

css() DOM, jQuery.

$element[0] DOM node.

, $photos:

$photos = [$(".photo1"), $(".photo2"), $(".photo3"), $(".photo4")];

( ) DOM node $()

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

---

. .sliderPhoto, jQuery . eq() docs each()

$(".sliderPhoto").eq(0) // first element

Answer 3

, : eq

$photos = [$(".photo1:eq(0)"), $(".photo2:eq(0)"),$(".photo3:eq(0)"), $(".photo4:eq(0)")];

photo1, .

Answer 4

, .

$photos = [$(".photo1"), $(".photo2"), $(".photo3"), $(".photo4")];

http://jsfiddle.net/62x9mdj6/

Answer 5

, $(".photo1")[0] DOM node, jQuery-, jQuery. :

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

.photo(n) " ", :

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

, $ jQuery, -jQuery (.. ).

Answer 6

. . , . .

$(document).ready(function() {

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

});

: http://jsfiddle.net/n8pqj2wg/