JQuery Code to add class in the first class div (Bootstrap Carousel)

If you have a bootstrap carousel for my post display( code is below ). And If you want to put in the loop to the posts, there comes problem of first child active. This carousel will be displayed only after the first child has class active. You cannot make all the inner item active and use the loop. This displays all the item in the loop.

My Code looks like this. This carousel is an example from bootstrap version 3.0.0.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div id="myCarousel" class="carousel slide">

<div class="carousel-inner">
<!-- loop starts from here -->
<div class="item">
<img src="your image source" alt="" class=""> <!-- from databse -->
<div class="carousel-caption">
<h4 class="">Title of the slide from databse</h4>

<p class="">
Description of the slide. [from database]
</p>
</div>
</div>

<!-- loop ends here -->
</div>
</div>

The output looks similar to this.

Now to make the first child active you need to use jquery code. For my above code jquery code looks like this.

<script type="text/javascript">
$(document).ready(function() {
$('.item:first-child').addClass('active');
});
</script>