[jQuery] How to select some but not all elements

[breadwild]

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");
   }
});