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'

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'

• javascript
• jquery

Share Improve this question Follow edited Sep 24, 2011 at 5:00 Yi Jiang 50.1k1616 gold badges138138 silver badges136136 bronze badges asked Sep 24, 2011 at 4:58 dgamma3dgamma3 2,37144 gold badges2727 silver badges4848 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 15

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.)

Try

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