Give an item the class of anothers item's children with jQuery or JS ( owl-carousel)

Question

This is my problem. I'm using the owl.carrousel MIT libraries in my page. This libraries automatly creates a div to give it the class "active" when it has to be shown. I want to set a different background in the carrousel section when any different "owl-item" is active.

This is the html code as i have it on my index.html document:

<section id="testimonials">

      <div class="container">
        <div class="owl-carousel testimonials-carousel">

            <div class="testimonial-item Titem1">
              <h3>First carousel item</h3>
            </div>

            <div class="testimonial-item Titem2">
              <h3>Second carousel item</h3>
            </div>

            <div class="testimonial-item Titem3">
              <h3>Third carousel item</h3>
            </div>

            <div class="testimonial-item Titem4">
              <h3>Fourth carousel item</h3>
            </div>

        </div>
      </div>

</section>

This is the html code on the page after the owl.carrousel libraries does it's magic:

<section id="testimonials">

    <div class="container">
        <div class="owl-carousel testimonials-carousel">

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item active">
                        <div class="testimonial-item Titem1">
                            <h3>First carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item">
                        <div class="testimonial-item Titem2">
                            <h3>Second carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item">
                        <div class="testimonial-item Titem3">
                            <h3>Third carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item">
                        <div class="testimonial-item Titem4">
                            <h3>Fourth carousel item</h3>
                        </div>
                    </div>
                 </div>
             </div>

         </div>
     </div>
</section>

I want to use the div with class="owl-item active" child's (the active testimonial-item that is being showed) to give a class to the section element id="testimonials", so each time any different .owl-item gets the class .active, the background of the section changes as well. I tried to do it with javascript and with jQuery but nothing worked for me, mabe because i'm still a noob xD.

For example this is the last thing i tried

$('#testimonials').addClass( $('.owl-item.active > .testimonial-item').attr("class") );

So if any GOD of JS or jQuery can help me pls :V I don´t really know what im doing.

Thank you for reading till the end ;)

Answer 1

The code of Daddys Code worked well, but actualy fast enough to give the class to the "#testimonials" even before the class "active" changes from an "owl-item" to another, so it gave it the class from the last "owl-item active" it can be fixed easily using "translated.owl.carousel" instead of "change.owl.carousel":

$(".owl-carousel").owlCarousel();

var owl = $(".owl-carousel");
owl.owlCarousel();

owl.on("translated.owl.carousel", function (event) {
    $("#IDi").removeClass();
    $("#IDi").addClass($(".owl-item.active > .testimonial-item").attr("class"));
});