[jQuery] li selection problem
I'm a newbee. I want to create a collapsable ul. But I want each
visible li (including both parent li and child li's ) to alternate the
background color. The problem is that when I apply the background to
the parent, all of the child li's do not change color they inherit the
parent color. I am using the following code to make this happen...
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('li.stripeable:even').addClass('greenbar');
});
</script>
<style>
.greenbar {
background-color:#EEEEEE;
}
ul {
list-style-type: none;
}
.stripeable {}
</style>
</head>
<body >
<ul >
<li class="stripeable" >
11111 (4 dates)
<ul>
<li class="stripeable">
date1
</li>
<li class="stripeable">
date2
</li>
<li class="stripeable">
date3
</li>
<li class="stripeable">
date4
</li>
</ul>
</li>
<li class="stripeable">
11112 (3 dates)
<ul>
<li class="stripeable">
date1
</li>
<li class="stripeable">
date2
</li>
<li class="stripeable">
date3
</li>
</ul>
</li>
<li class="stripeable">
11113 (3 dates)
<ul>
<li class="stripeable">
date1
</li>
<li class="stripeable">
date2
</li>
<li class="stripeable">
date3
</li>
</ul>
</li>
</ul>
</body>
</html>