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.

pwdst · Accepted Answer · 2014-12-21 21:45:15Z

6

$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

edited Dec 21, 2014 at 21:45

pwdst

13.9k4 gold badges37 silver badges51 bronze badges

answered Dec 21, 2014 at 20:50

Gaurav Kalyan

1,8952 gold badges14 silver badges21 bronze badges

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

5 Comments

pwdst Over a year ago

This gets the first DOM element from the jQuery object, and then converts it back to a jQuery object. Does it not make sense to use the jQuery .first() method (api.jquery.com/first) so that you can still use the .css() method on the result, rather than get a DOM element and convert it back to a whole new jQuery object.

Gaurav Kalyan Over a year ago

@pwdst yeah that is a better approach.

pwdst Over a year ago

@GauravKalyan I have taken the liberty of editing your answer to add in the alternative approach, whilst retaining your original answer as is

Gaurav Kalyan Over a year ago

@pwdst I was going to do the same. Thank you. I was just trying to point the OP mistake that OP is applying a jQuery function to DOM element.

pwdst Over a year ago

@GauravKalyan Your answer was spot on in that regard - and still deserves to be the accepted answer. I just wanted to expand on it with the jQuery methods as an alternative to the filtering approach originally used by the OP.

try-catch-finally · Accepted Answer · 2014-12-21 20:58:36Z

0

You try to access the css() method on a DOM object not on a jQuery instance.

The expression $element[0] refers to the real DOM node.

You should either change the expression that creates your $photos array to this:

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

(and adapt other code references aswell) or re-wrap each DOM node using $()

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

Note: you could also find the elements by the .sliderPhoto selector, getting a jQuery collection of four items in your example. You can then access individual nodes using eq() docs or even iterate using each() docs

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

answered Dec 21, 2014 at 20:58

try-catch-finally

7,6606 gold badges49 silver badges71 bronze badges

Comments

cesare · Accepted Answer · 2014-12-21 20:59:15Z

0

to get the first element of a collection of object you should use pseudo selector :eq

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

but if you have only one instance of photo1, you can consider use id instead a class, or apply your rule at all the class.

answered Dec 21, 2014 at 20:59

cesare

2,11820 silver badges30 bronze badges

Comments

Playmaker · Accepted Answer · 2014-12-21 20:59:26Z

0

Since your class selector would return only 1 element, you should do it like this.

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

http://jsfiddle.net/62x9mdj6/

answered Dec 21, 2014 at 20:59

Playmaker

1,4561 gold badge14 silver badges23 bronze badges

Comments

Terry · Accepted Answer · 2014-12-21 20:59:45Z

0

That is because $(".photo1")[0] returns a DOM node, which is unmanipulatable by jQuery methods because they work with jQuery objects. Instead, try:

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

If you do not want to cache the .photo(n) elements on the fly, simply use an array of classes instead:

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

Note that I prefer to use $ for jQuery objects but not for non-jQuery ones (i.e. second example).

answered Dec 21, 2014 at 20:59

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Comments

Michelangelo · Accepted Answer · 2014-12-21 21:04:40Z

0

This works. Remove the index in the array. You don't need them anyway. Since you do not have more than one of each class.

$(document).ready(function() {

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

});

Working fiddle: http://jsfiddle.net/n8pqj2wg/

answered Dec 21, 2014 at 21:04

Michelangelo

5,9785 gold badges36 silver badges51 bronze badges

Collectives™ on Stack Overflow

jquery .css() not working

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related