$('#menu li.top > a').css('background-color', 'tan');
The selector is just like CSS.
On Sun, Oct 25, 2009 at 10:25, breadwild <breadw...@gmail.com> wrote:
>
> Hello,
>
> I'm building a nested menu where I want to add background colors only
> to top menu items. I can't change the generated code, so I have to
> live with the id's and classes as is.
>
> Relatively new to jQuery so still not used to filtering my selections
> carefully—is seems to grab everything. Anyway, I have
> tried: .is, .content, .filter, and some parent, child stuff, but can't
> seem to only apply the effect to the "top" class—it just selects
> everything.
>
> Thoughts? Fundamental concepts welcome. Thanks in advance. —breadwild
>
> HTML:
>
> <ul id="menu">
> <li class="top"><a href="#">Menu Item 1</a></li>
> <li class="top"><a href="#">Menu Item 2</a>
> <ul>
> <li><a href="#">SubMenu A</a></li>
> <li><a href="#">SubMenu B</a></li>
> </ul>
> </li>
> <li class="top"><a href="#">Menu Item 3</a></li>
> <li class="top"><a href="#">Menu Item 4</a></li>
> </ul>
>
> JAVASCRIPT:
>
> /* seems like I want something like this, but just colors every <li>
> with color */
> $("#menu li").each(function () {
> var c = $(this).attr("class");
> if ( c == "top" ) {
> $("#menu li a").css("background-color","tan");
> }
> });
>
> /* this works if I want to apply it to <li>, but I want <a> */
> $("#menu li").each(function () {
> var c = $(this).attr("class");
> if ( c == "top" ) {
> $(this).css("background-color","tan");
> }
> });
>
>
