jquery - Object ... has no method 'css'

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({
         ...
      });
  });

error I'm getting:

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

Answer 1

When you use [] to access an item in a jQuery array, you get the DOM element, not a jQuery object, so it doesn't have any jQuery methods.

Try .eq() instead:

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

(Note that I changed the spelling of "tier" in the variable name. Sorry, I can't help myself.)