[jQuery] How to select some but not all elements
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");
}
});