I would like to alternate background colors for odd and even list items in my unordered list. This worked great until I added javascript inside of each list item. If I remove the javascript, the background color alternates as it should. With the javascript, I can see in firebug that each list item looks like it is even.
The reason why I need to have the javascript inside of each list item is because I am dynamically displaying each list item from the database, and assigning classes based upon the application id ($apid).
My css to alternate background color of list items:
ul.version li:nth-child(odd) {
background: #EEE;
}
ul.version li:nth-child(even) {
background: #FFF;
}
And the applicable code in my php page:
<ul class="version">
<li class="versionheader">
<ul>
<li class="appname">
Application
</li>
<li class="appvidlink">
Video
</li>
<li class="appwish">
Wishlist
</li>
<li class="appimplement">
Implemented
</li>
</ul>
</li>
<?php
//get child applications
$application_id_result = mysql_query("SELECT apid from products_app_categories WHERE cid = '$catid'");
while($application_id_row = mysql_fetch_array($application_id_result)) {
$apid = $application_id_row['apid'];
//see if user already has app in their wishlist
$application_wished_result = mysql_query("SELECT COUNT(apid) FROM products_wishlist_users WHERE apid = '$apid' AND uid = '$uid'");
while($application_wished_row = mysql_fetch_array($application_wished_result)) {
if($application_wished_row['COUNT(apid)'] < 1) {
$appwished = false;
} else {
$appwished = true;
}
$application_result = mysql_query("SELECT * FROM products WHERE child = '1' AND parent_id = '$pid' AND id = '$apid'");
while($application_row = mysql_fetch_array($application_result)) {
$apname = $application_row['name'];
?>
<li class="app app_<?php echo $apid; ?> <?php if($appwished) { echo 'appwished'; } ?>">
<ul>
<li class="appname">
<?php echo $apname; ?>
</li>
<li class="appvidlink">
[video]
</li>
<li class="appwish">
<?php if(!$appwished) {
echo '<a class="btn addtowishlist addtowishlist_' . $apid . '">Add</a>';
} else {
echo '<span class="checkmark"></span>';
} ?>
</li>
<li class="appimplement">
<?php if(!$implemented) {
echo '<a class="btn addtoimplemented">Yes</a>';
} else {
echo '<span class="checkmark"></span>';
} ?>
</li>
</ul>
</li>
<script type="text/javascript">
$('.addtowishlist_<?php echo $apid; ?>').click(function(){
$.get("wishlist/wishlistupdate.php?uid=<?php echo $uid; ?>&apid=<?php echo $apid; ?>");
$("#wishlistapps").load("wishlist/wishlistdisplay.php?uid=<?php echo $uid; ?>");
$("li.app_<?php echo $apid; ?>").addClass("appwished");
return false;
});
</script>
<?php
} } }?>
</ul>