Using .css property in jQuery

Question

Code 1

jQuery("ul#leftmenuacc").find("span.leftmenutextspan")[0].css('color', 'red');

The above code doesn't work, so I had to do it another way [ below mentioned ]

Code 2

jQuery("ul#leftmenuacc").find('span.leftmenutextspan').each(function(index){ if(index ==0) jQuery(this).css('color', 'red') });

I am confused here as why didn't the Code 1 works? I read the documentation on .css from Jquery Docs, but couldn't find what I am missing.

Is there an elegant way to do it? Because currently I am iterating through a lot of DOM Items for no use.

if you exactly copy-pasted your code, in the first line, you didn't actually closed your quote at ul#leftmenuacc — Umur Kontacı
– Umur Kontacı, Commented Oct 12, 2011 at 9:14

Igor Dymov · Accepted Answer · 2011-10-12 09:10:31Z

3

When you are doing $(selector)[0] you will get HTMLElement, which hasn't got css function. You may wrap it with jQuery like: $($(selector)[0]), but better solution is to use :eq(0) or :first selector:

jQuery("ul#leftmenuacc").find("span.leftmenutextspan:eq(0)").css('color', 'red');

answered Oct 12, 2011 at 9:10

Igor Dymov

16.5k5 gold badges52 silver badges56 bronze badges

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

1 Comment

Vabs Over a year ago

Thanks for explaining and nice approach.

bjornd · Accepted Answer · 2011-10-12 09:11:36Z

0

jQuery("ul#leftmenuacc").find("span.leftmenutextspan:first").css('color', 'red');

answered Oct 12, 2011 at 9:11

bjornd

23k4 gold badges59 silver badges74 bronze badges

Comments

Ergec · Accepted Answer · 2011-10-12 09:11:59Z

0

in Code 1 you are missing doublequotes (") after ul#leftmenuacc

and I'd do it like this

$("span.leftmenutextspan:first", "ul#leftmenuacc").css('color', 'red');

answered Oct 12, 2011 at 9:11

Ergec

11.9k7 gold badges54 silver badges68 bronze badges

1 Comment

Vabs Over a year ago

Thanks mate. Liked your approach too.

vzwick · Accepted Answer · 2011-10-12 10:05:51Z

All of the other answers provide working solutions. If performance is not entirely unimportant to you, the following should be considered as well:

Refrain from using :eq (or :first, as suggested in some of the other answers) selectors whenever you can.

Usually, jQuery uses the browser's native querySelectorAll() DOM traversal method, which is considerably faster than jQuery parsing the DOM tree on its own.

Since :eq and :first are jQuery-specific, querySelectorAll() cannot be used – thus, jQuery has to resort to using its own, much slower, traversal engine instead.

The recommended alternative for this scenario is the use of jQuery's filter() or first() (which, afair, internally maps to filter()) methods:
```
jQuery("ul#leftmenuacc").find("span.leftmenutextspan").first().css('color', 'red');
```
Quote jQuery's own documentation on :first:

Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

To achieve the best performance when using :first to select elements, first select the elements using a pure CSS selector, then use .filter(":first").

How much speed do you gain? Well, .first() is around 10 times as fast as :first in standard scenarios.
The use of find() seems unnecessary in your example and slows your code for the same reason as mentioned above. This would be the better alternative:
```
jQuery("ul#leftmenuacc span.leftmenutextspan").first().css('color', 'red');
```

Thanks for the information. Performance is not really an concern for me for now. But I will definitely keep this in mind.

Collectives™ on Stack Overflow

Using .css property in jQuery

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related