Question

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">
                                                
                                            </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>

Answer 1

set background color with javascript at end of the script.

$('ul.version li:even').css('background-color','#EEE');
$('ul.version li:odd').css('background-color','#FFF');

make sure to load jquery in header 😡