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:
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...
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