Установите дочерний div на белый, если родительский div прозрачен

Question

Используя слегка модифицированную карусель для начальной загрузки, мне нужно определить дедушку дедушки (в данном случае класс .row), который может отличаться от значения по умолчанию .row-default (который имеет прозрачный фон), до .row-light и .row-dark. Я могу захватить светлые и темные цвета из соответствующих классов, но мне нужно определить, установлен ли цвет фона в прозрачный, и установить класс управления на белый или #fff, если для дедушки и бабушки установлен прозрачный , Это позволит элементам управления сидеть над краем карусельных слайдов.

HTML

<div class="row row-dark"> 
<div class="container"> 
<div class="carousel slide" id="myCarousel"> 
<div class="quote-carousel"> 
    <div class="carousel-inner"> 
    <h6>What customers say about us</h6> 
    <div class="item active"> 
     <ul class="thumbnails"> 
     <li class="col-xs-12 col-sm-12 slide-content"> 
      <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3> 
       <span class="time">-Robyn Estroff</span> 
      </li> 
     </ul> 
    </div> 
    <div class="item"> 
     <ul class="thumbnails"> 
     <li class="col-xs-12 col-sm-12 slide-content"> 
      <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3> 
       <span class="time">-Robyn Estroff</span> 
      </li> 
     </ul> 
    </div> 
    <div class="item"> 
     <ul class="thumbnails"> 
     <li class="col-xs-12 col-sm-12 slide-content"> 
      <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3> 
       <span class="time">-Robyn Estroff</span> 
      </li> 
     </ul> 
    </div> 
    </div> 

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <i class="material-icons">&#xE314;</i> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <i class="material-icons">&#xE315;</i> 
    </a> 

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

CSS

.row-dark{ 
    background-color: #ddd; 
} 

.quote-carousel{ 
    h6{ 
    color: $purple; 
    font-weight: bold; 
    text-align: center; 
    } 
    h3{ 
    color: $dark-navy-blue; 
    font-weight: 100; 
    padding: 30px 0px 30px 0px; 
    margin: 0% 12% -1% 12%; 
    } 
    .carousel{ 
    position: relative; 
    width: 60%; 
    margin: 0 auto; 
    min-height: 170px; 
    padding-left: 5%; 
    padding-right: 5%; 
    } 
    .carousel-control{ 
    padding-top: 4%; 
    padding-bottom: 7%; 
    width:7%; 
    } 
    .material-icons{ 
    color: $black; 
    padding: 0px; 
    border: 1px solid $darkest-grey; 
    border-top-right-radius: 50px; 
    border-top-left-radius: 50px; 
    border-bottom-right-radius: 50px; 
    border-bottom-left-radius: 50px; 
    } 
    .active{ 
    margin-top: -13px; 
    } 
    .thumbnails{ 
    padding: 0px 40px; 
    li{ 
     margin-bottom: 5%; 
    } 
    } 
    .slide-content{ 
    text-align: center; 
    } 
} 

/***************** TABLET **************/ 
@media (min-device-width: $screen-sm-min) and (max-device-width: $screen-lg-min) { 
    .quote-carousel h3{ 
    margin: 0 auto; 
    padding: 30px 0px 15px; 
    } 
    .carousel-control{ 
    background-color: #ebebeb; 
    padding-top: 4%; 
    padding-bottom: 7%; 
    width: 7%; 
    } 
} 

/****************** MOBILE ***************/ 
@media (max-device-width: $screen-xs-max) { 
    .quote-carousel h3{ 
    margin: 0 auto; 
    font-size: 12px; 
    padding: 30px 0px 15px; 
    } 
    .carousel-control{ 
    background-color: #ebebeb; 
    padding-top: 4%; 
    padding-bottom: 7%; 
    width: 7% 
    } 
} 

JQuery

$('.left').hide(); 
$('.carousel').carousel({ 
     wrap: false 
    }).on('slid.bs.carousel', function() { 
     curSlide = $('.active'); 
     if(curSlide.is(':nth-child(2)')) { 
     $('.left').hide(); 
     return; 
     } else { 
     $('.left').show(); 
     } 
     if (curSlide.is(':last-child')) { 
     $('.right').hide(); 
     return; 
     } else { 
     $('.right').show(); 
     } 
    }); 

Это захватывает класс grandparent и применяет свойство оттуда, но я не уверен, как установить контроль фона на белый, если фон строки прозрачен.

jQuery.fn.inheritGrandparent = function(property) { 
    var $this = $(this), 
     value = $this.parent().parent().parent().parent().css(property); 
    if(property && value) $this.css(property, value); 
}; 
$('.carousel-control').inheritGrandparent('background'); 

Fiddle: https://jsfiddle.net/ccajtj64/1/

Answer 1

Я думаю, что самый простой способ превратить вашу функцию в условном ли прародитель имеет .row-default класс, и применяются соответственно.

jQuery.fn.inheritGrandparent = function(property) { 
     var $this = $(this), 
      grandparent = $this.closest('.row'), 
      value = grandparent.css(property); 
     if (property && value) { 
     if (grandparent.hasClass('row-default')) { 
      $this.css(property, 'white'); 
     } else { 
      $this.css(property, value); 
     } 
     } 
     }; 
    $('.carousel-control').inheritGrandparent('background'); 

Но вы также можете проверить ценность класса grandparent и использовать условное обозначение. Возвращаемое значение может быть непоследовательным и варьироваться от браузера к браузеру.

jQuery.fn.inheritGrandparent = function(property) { 
     var $this = $(this), 
      value = $this.closest('.row').css(property); 
     if (property && value) { 
     if (value.indexOf('transparent') !== -1 || value.indexOf('rgba(0, 0, 0, 0)') !== -1) { 
      $this.css(property, 'white'); 
     } else { 
      $this.css(property, value); 
     } 
     } 
     }; 
    $('.carousel-control').inheritGrandparent('background');