Добавить класс в элемент Если он уже имеет определенный класс

Question

Я пытаюсь динамически добавлять класс в slide-content и slide-buttons в поле заголовка Bootstrap Carousel. Я хочу, чтобы мой код добавлял класс animate, только если родительский div с классом item имеет добавленный к нему класс active. (класс active добавляется только тогда, когда элемент перемещается внутрь.). Вот основной HTML-код карусели.

<div class="carousel-inner" role="listbox"> 
    <!-- Item 1 --> 
    <div class="item active"> 
     <img src="..." alt="..."> 
     <div class="carousel-caption"> 
     <div class="slide-content> 
     ... 
     </div> 
     <div class="slider-buttons"> 
     ... 
     </div> 
     </div> 
    </div> 
    <!-- /Item 1 --> 
    <!-- Item 2 --> 
    <div class="item"> 
     <img src="..." alt="..."> 
     <div class="carousel-caption"> 
     <div class="slide-content> 
     ... 
     </div> 
     <div class="slider-buttons"> 
     ... 
     </div> 
     </div> 
    </div> 
    <!-- /Item 2 --> 
    ... 
    </div> 

И вот что я пробовал.

$item = $('.carousel-inner > .item'); 
$($('.carousel-inner > .item')).each(function() { 
if (this.hasClass('active')) { 
    $('.carousel-caption > .slide-content, .carousel-caption > .slider-buttons').addClass('animated'); 
} else { 
    $('.carousel-caption > .slide-content, .carousel-caption > .slider-buttons').removeClass('animated'); 
} 
}); 

Теперь, когда я удалить each функцию JQuery, он добавляет класс animated ко всем элементам, когда любой из пункта получает класс active. Кроме того, он вообще не удаляет класс (поскольку класс active есть, в отличие от родительского div.). И когда я добавляю функцию each, она вообще не работает.

Пожалуйста, помогите.

Answer 1

Вы можете пройти элементы с помощью соответствующего переключателя

var inner = $('.carousel-inner'); 

//traverse not active item then find the buttons and remove the animated class 
inner.find('> .item:not(.active) .carousel-caption').children('.slide-content .slider-buttons').removeClass('animated'); 

//traverse active item then find the buttons and add the animated class 
inner.find('> .item.active .carousel-caption').children('.slide-content .slider-buttons').addClass('animated'); 

Answer 2

Мое предположение:

$('.carousel-inner :not(.active)').find('.slide-content,.slider-buttons').removeClass('animated'); 
    $('.carousel-inner .active').find('.slide-content,.slider-buttons').addClass('animated'); 

Btw, вы забыли закрывающий двойные кавычки в:

<div class="slide-content> 

Он должен прочитать это вместо:

<div class="slide-content">