Question

我有多个（可能无限制）＆＃34;绝对＆＃34;不同高度的类，但下面的代码设置EACH＆＃34; relative＆＃34; div到第一个绝对元素的高度。每个绝对div都是不同的高度，所以我需要循环并将每个相对div设置为其绝对div的高度。

HTML

      <div class="relative">
          <div class="absolute">
           <p>content here, which will be variable, so the heights will not always be the same</p>
          </div>
      </div>

Jquery的：

$( document ).ready(function() {
    var current_height = 0;
    $('.absolute').each(function() {
        current_height = $('.absolute').height();
    });
    $('.relative').each(function() {
        $('.relative').height(current_height);
    });
});

CSS：

  #relative {
   position: relative;
   display: block;
   width: 100%;
  }

 #absolute {
   position: absolute;
   display: block;
   overflow:hidden;
  }

 #relative,
 #absolute {
    width: 100%;
   max-width: 820px;
  }

Answer 1

在第一个current_height函数之外定义的.each()变量会被每次迭代覆盖。你只需要一个循环就可以修改第二个.each()函数，如下所示：

$('.absolute').each(function() {
     current_height = $(this).height();
     $(this).parent().height(current_height);
});

Answer 2

我的建议是使用jQuery函数高度而不是每个：

$(function () {
  $('.relative').height(function(index, height) {
    //(this.querySelectorAll('.absolute')[0]).setAttribute('style','height:' + height + 'px');
    // or  in jQuery
    $(this).find('.absolute').css('height',  height + 'px');
  });
});

#relative {
  position: relative;
  display: block;
  width: 100%;
}

#absolute {
  position: absolute;
  display: block;
  overflow:hidden;
}

#relative,
#absolute {
  width: 100%;
  max-width: 820px;
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<div class="relative">
    <div class="absolute">
        <p>content here, which will be variable, so the heights will not always be the same</p>
    </div>
</div>
<div class="relative">
    <div class="absolute">
        <p>content here, which will be variable, so the heights will not always be the same</p>
    </div>
</div>
<div class="relative">
    <div class="absolute">
        <p>content here, which will be variable, so the heights will not always be the same</p>
    </div>
</div>
<div class="relative">
    <div class="absolute">
        <p>content here, which will be variable, so the heights will not always be the same</p>
    </div>
</div>

根据jQuery中另一个类的大小设置每个类的高度

2 个答案: