无法拉出outerHeight并将其作为“min-height”#39;

时间:2017-05-22 22:25:07

标签: jquery

基本上我需要div carousel-services-image与div carousel-services-content具有相同的高度。但由于某些原因,脚本根本没有为div carousel-services-image添加min-height。



function carouselService() {
  $('carousel-services-item').each(function() {
    var ths = $(this),
        thsh = ths.find('.carousel-services-content').outerHeight();
        ths.find('.carousel-services-image').css('min-height', thsh);
  });
}
carouselService();

<div class="carousel-services-item">
  <div class="carousel-services-content">
      <div class="carousel-services-composition">
        <div class="carousel-logo"><img src="img/nea-logo-black.png" alt="NEA"></div>
        <h3 class="h3">Service Dos.</h3>
        <ul class="carousel-services-list">
          <li>Lorem ipsum dolor. #1 - <strong>50 <i class="fa fa-dollar"></i></strong></li>
          <li>Lorem ipsum dolor. #2 - <strong>50 <i class="fa fa-dollar"></i></strong></li>
          <li>Lorem ipsum dolor. #3 - <strong>50 <i class="fa fa-dollar"></i></strong></li>
        </ul>
        <a href="#" class="button button-white">List of Services</a>
      </div>
  </div>
  <div class="carousel-services-image" style="background-image: url(img/banner2.jpg);min-height: 350px;"></div>

</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

1st:确保包含jquery

第二名:你忘了.课前的carousel-services-item

$(document).ready(function(){
  carouselService();
});
  
function carouselService() {
  $('.carousel-services-item').each(function() {
    var ths = $(this),
        thsh = ths.find('.carousel-services-content').outerHeight();
        ths.find('.carousel-services-image').css('min-height', thsh +'px');
        
        
        //For check
        alert(ths.find('.carousel-services-image').css('min-height'));
  });
}
.carousel-services-image{
  background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-services-item">
  <div class="carousel-services-content">
      <div class="carousel-services-composition">
        <div class="carousel-logo"><!--<img src="img/nea-logo-black.png" alt="NEA">--></div>
        <h3 class="h3">Service Dos.</h3>
        <ul class="carousel-services-list">
          <li>Lorem ipsum dolor. #1 - <strong>50 <i class="fa fa-dollar"></i></strong></li>
          <li>Lorem ipsum dolor. #2 - <strong>50 <i class="fa fa-dollar"></i></strong></li>
          <li>Lorem ipsum dolor. #3 - <strong>50 <i class="fa fa-dollar"></i></strong></li>
        </ul>
        <a href="#" class="button button-white">List of Services</a>
      </div>
  </div>
  <div class="carousel-services-image" style="min-height: 350px;"></div>

</div>