How to get css value of an element inside array?

Question

I have a list, and want to get the value of background of the last element.

    <ul>
        <li style="background: red;"></li>
        <li style="background: blue;"></li>
        <li style="background: yellow;"></li>
        <li style="background: white;"></li>
    </ul>

and I use this jQuery script

var color = $( 'ul li' ).get(-1).css('background');

but it's not working. I googled it, but nothing found.
Could any one help me to find out the problem.

EDITED: this is not working on IE, my be I am wrong. but isn't any other way?

$( 'ul li:last' ).css('background');

Arius · Accepted Answer · 2013-10-02 18:20:47Z

2

All answers above will propably output empty string.

Please check:

var color = $('ul li').eq(-1).css('background-color');

In fact, you are seting the background-color, no background itself.

JsFiddle to prove: http://jsfiddle.net/7gxkp/

answered Oct 2, 2013 at 18:20

Arius

1,3871 gold badge11 silver badges24 bronze badges

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

Comments

Jason P · Accepted Answer · 2013-10-02 18:14:50Z

2

The reason your code doesn't work is because get() returns the DOM node, which doesn't have a css() function. You're looking for this:

$( 'ul li' ).eq(-1).css('background');

answered Oct 2, 2013 at 18:14

Jason P

27k3 gold badges34 silver badges45 bronze badges

Comments

PSL · Accepted Answer · 2013-10-02 18:18:40Z

2

You can do:

 var color = $( 'ul li:last' ).css('background');

Reason is get(-1) returns DOM element which doesn't have css method, css is a method of jquery object and not Native DOM element.

or do :

var color = $( 'ul li' ).get(-1).style.background;

You can also use jquery .last()

 var color = $( 'ul li' ).last().css('background');

Note that jquery css uses getComputerStyle so you may end up getting all the background properties of the element (defaulted by the user agent as well) not just the color. If you want just the color using jquery css then you may want to specify .css('background-color') explicitly.

edited Oct 2, 2013 at 18:18

answered Oct 2, 2013 at 18:13

PSL

124k21 gold badges257 silver badges243 bronze badges

6 Comments

Pars Over a year ago

I do not want to use this piece of code, I don't know why but it is not working on IE

Ram Over a year ago

@aliA It should work on IE, if it doesn't work then you are doing something wrong.

Ram Over a year ago

Yes, jQuery 1.9 and below support IE and :last selector works in those browsers, however, as you know jQuery 2+ doesn't support IE8 and below.

Barmar Over a year ago

@PSL jQuery doesn't depend on the browser's built-in selector support, it does it all by itself. This is one of the ways you get better cross-browser behavior when using jQuery.

PSL Over a year ago

@Barmar @:undefined Thanks, that's what i guessed. Anyways probably this is a different issue.

|

blackeyebeefhorsefly · Accepted Answer · 2013-10-02 18:13:43Z

1

I'm not sure on the usage of get, but you can use CSS selectors with your jquery to do it like

var color = $( 'ul li:last-child' ).css('background');

It should be simpler! Let me know if this works for you! :)

answered Oct 2, 2013 at 18:13

blackeyebeefhorsefly

1,9441 gold badge15 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to get css value of an element inside array?

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related