Adding css style to the element selected with .get( [ index ] )

Question

I'm trying to add style with .css() method to the element selected with .get():

$('.toggle').get(0).css("display", "none");

...but that doesn't work. What am I doing wrong?

Answer 1

jQuery's .get() method returns the plain DOM element.

You should use jQuery's .eq() method instead when selecting by index.

$('.toggle').eq(0).css("display", "none");

This will return a jQuery object with the DOM element at the index you specify, so you'll be able to call jQuery methods against it.

Or perhaps better, place it all in the selector using :eq() or :first selector:

$('.toggle:eq(0)')

or

$('.toggle:first')

Also, jQuery has .show() and .hide() methods to set the display property. Or perhaps .toggle() is more appropriate considering the class name.

Answer 2

Is what you want to do

$('.toggle').first().css("display", "none");

the .get(0) returns a DOM object, not a jQuery object.

Answer 3

The .get(n) function returns the original DOM object. If you want to use this, you can always access the .style object and change the CSS properties from there, such as:

$('.toggle').get(0).style.display = 'none';

or, you can just use the eq(n) function to grab the n^th jQuery object:

$('.toggle').eq(0).css("display", "none");

In your case, first() will also work. You can also always use the selector version of these: :eq(n) or :first.