Jquery - Object ... does not have a 'css' method

Question

Why can't I change the CSS of this element?

$("div.example ul li").mouseover(function () { var ul_teirs = $("div.example ul li").find('ul'); var second_teir = ul_teirs[0]; var third_teir = ul_teirs[1]; second_teir.css({ ... }); }); 

The error I am getting is:

 Uncaught TypeError: Object #<HTMLUListElement> has no method 'css' 

Answer 1

When you use [] to access an element in a jQuery array, you get a DOM element, not a jQuery object, so it has no jQuery methods.

Try .eq() instead:

 var second_tier = ul_tiers.eq(0); second_tier.css({ ... }); 

(Note that I changed the spelling of “level” in the variable name. Sorry, I can’t help myself.)

Answer 2

Try

  var second_teir = ul_teirs.eq(0); var third_teir = ul_teirs.eq(1);