Question

I have an ASP.Net Navigation Menu control with 1 item that I need to dynamically change the color of the text if certain conditions exist. I have a function set to run every 1 second to check for those conditions and needs to set the text of the menu item to Red if true. I’ve tried:

var item = $("ul").children().eq(6);
item.style.color = "red";

But get “cannot set property color of undefined” error. I’ve tried:

$("ul").children().eq(6).css("color", "red");

And it finds the menu item, changes the color property to red, but still displays the previous color. Never actually turns red. Below is the html from the page when this happens:

<li role="menuitem" class="static" style="position: relative; float: left; color: red; ">
    <a class="level1 static" href="Sync.aspx" tabindex="-1">Sync</a>
</li>

Any ideas?

Answer 1

It’s because you’ve got an anchor tag <a> within the <li>. What you need to do is to set the color of the <a> not the color of the <li>:

$("ul").children().eq(6).children().css("color", "red");

Example: http://jsfiddle.net/Jscng/