Question

我有多个div使用相同的html，具有可变的高度。我正在尝试计算div .content的高度，然后使用该值设置.sections div的高度。目前，此函数仅影响其类型的最后一个div。如何使此功能可重用，以便它适用于页面上的每个div？

var currentHeight = 0;
jQuery(document).ready(function() {

    jQuery('.content').each(function() {
      currentHeight = jQuery(this).outerHeight();
    });

    jQuery('.sections').each(function() {
      jQuery(this).css('height', currentHeight/2);
    });

});

示例HTML：

<div class="sections"></div>
  <div class="content">content with a height of 200px</div>
<div class="sections"></div>

other html....

<div class="sections"></div>
  <div class="content">content with a height of 400px</div>
<div class="sections"></div>

因此，前两个.sections的高度为100px，最后两个.sections的高度为200px。

更新 我找到了基于Forty3答案的解决方案！这可以写得更干吗？

Forty3的解决方案对我有用，稍作调整：

// With the .content FOLLOWING the .section - use the following:
jQuery(document).ready(function() {

    jQuery('.bigImageSections').each(function() {

      var ic = jQuery(this).next('.translatedContent');
      if (ic.length > 0) {
        jQuery(this).css('height', jQuery(ic).outerHeight() / 2);
      }

      var ict = jQuery(this).prev('.translatedContent');
      if (ict.length > 0) {
        jQuery(this).css('height', jQuery(ict).outerHeight() / 2);
      }

    });
});

Answer 1

根据内部.section元素的高度，运行.content元素重新计算其高度：

// If the .content was inside the .section - use the following
jQuery(document).ready(function() {

    jQuery('.sections').each(function() {
      var ic = jQuery('.content', this);
      if (ic.length > 0) {
        jQuery(this).css('height', jQuery(ic).outerHeight() / 2);
      }
    });
});

// With the .content FOLLOWING the .section - use the following:
jQuery(document).ready(function() {

    jQuery('.sections').each(function() {
      var ic = jQuery(this).next('.content');
      if (ic.length > 0) {
        jQuery(this).css('height', jQuery(ic).outerHeight() / 2);
      }
    });
});

编辑：忘记除以2.

顺便说一句：我在您的示例HTML中注意到，您的.content未包含在.section中..这是故意的吗？如果是这样，您是否预期.section元素会根据前面或后面的.content元素进行智能调整？

带有.outerHeight函数的jquery .each会影响所有div

1 个答案: