Question

Here is my code,

<style type="text/css">
    .sample 
    {
        background:yellow;
        width:50%;
        border:1px solid #000;
        padding:5px;
        margin:2px;
        color:#fff;
        margin: 5px auto 0;
    }
</style>
<?php 
    for($i=0;$i<=5;$i++)
    {
        if($i == "2") { ?>
            <style type="text/css">
                .sample 
                {
                    background:red;
                    width:50%;
                    border:1px solid #000;
                    padding:5px;
                    margin:2px;
                    color:#fff;
                    margin: 5px auto 0;
                }
            </style>
        <?php } ?>
        <div class="sample">
            <?php echo $i; ?> Sample Testing
        </div>
<?php } ?>

In the above for loop i have to change the division ( sample ) background color to red , when the increment value($i) is "2".

NOTE:

1. Without change the class name for the division.
2. JQuery is recommended for this.
3. Dont use inline styles.

Actually i have implemented one Jquery calender in one of projects. In that calender, users can book their slots (days). So i need to show that booked slots (days) in some different color. But we cant able to edit that default class name in Jquery. So this the sample code, i generated related to that.

Please help me on this, If any useful answer will be really appreciate..

Thanks in advance…

Answer 1

You can use php to give inline style for a specific conditon like yours or you can toggle between different classes

1) Using php

<?php 
    for($i=0;$i<=5;$i++)
    {
        ?>
        <div class="sample" <?php if($i == 2){ echo "style='background:red;'"}?>>
            <?php echo $i; ?> Sample Testing
        </div>
<?php } ?>

Since you are so adamant about using jquery, you can try this way too

2) Using jquery

$(document).ready(function(){
   $("div.sample:nth-child(2)").css('background', 'red');

});

Check this DEMO