时间戳

首页 > 解决方案 > 循环遍历 div 以定义父级高度

javascript - 循环遍历 div 以定义父级高度

问题描述

有多个部分。每个部分都有多个选项卡。我想获取第一个选项卡高度（.tab-content）并将其高度应用于它所在的部分（.tab）。这需要单独发生在每个部分 - 因此是循环。该循环目前似乎没有参与，并且 .tab-content 上的第一个高度正在应用于所有部分。为什么我的循环不起作用？

现场示例：https ://staging.123innovation.co.uk/careers/faq

JS

    function tabParentHeight() {

$(".tabs").each(function() {

  var ph = $(this).outerHeight();
  $(this).find('.tab-content:first').css('min-height', 0);
  var ch = $(this).find('.tab-content:first').outerHeight();

  if (ch > ph) {
    $(this).css({
      'height': ch + 'px'
    });
  }
});

}


$(document).ready(function () {


// TABS

// Run Tab Height
tabParentHeight();

$('section a').click(function(event) {
  event.preventDefault();
  $(this).addClass('active');
  $(this).siblings().removeClass('active');

  var ph = $(this).parent().height();
  var ch = $(this).next().height();

  if (ch > ph) {
    $(this).parent().css({
      'height': ch + 'px'
    });
  } else {
    $(this).parent().css({
      'height': 'auto'
    });
  }
});

});


$(window).resize(function() {
  // Run Tab Height
  tabParentHeight();
});

$(document).resize(function() {
  // Run Tab Height
  tabParentHeight();
});

HTML

<section class="tab">

              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative active" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content One</h3>
                  <p>Content goes here</p>
              </div>



              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content Two</h3>
                  <p>Content goes here</p>
              </div>



              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content Three</h3>
                  <p>Content goes here</p>
              </div>


</section>



<section class="tab list ml2 pl0 tf w-100 h-auto db relative">


              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative active" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content One</h3>
                  <p>Content goes here</p>
              </div>



              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content Two</h3>
                  <p>Content goes here</p>
              </div>



              <a class="tab-link link pointer blue hover-teal no-underline d tab-link w-33-ns pb3 ba bl-0 bt-0 br-0 b--dotted b--black-30 db relative" target="_blank">
              <span class="fa-li"><i class="fas fa-caret-down blue teal rm-90"></i></span>
              Title One
              </a>

              <div id="tab-21" class="tab-content w-two-thirds-ns h-auto pt3 pb2 pl3 pl5-ns">
                  <h3 class="dn db-ns">Content Three</h3>
                  <p>Content goes here</p>
              </div>


</section>

标签： javascriptjqueryhtml

解决方案

不确定这些元素是如何生成的，但由于某种原因，它导致了问题。所有选项卡内容都具有min-height: 100%属性，并且由于您添加了脚本，因此所有选项卡的高度都与第一个相同。

无论如何要解决此问题，您可以删除 css 中的min-height: 100%intab-content类或在脚本中执行以下操作：

$('.tabs').each(function() {
    $(this).find('.tab-content').css('min-height', 0);
    $(this).outerHeight($(this).find('.tab-content').outerHeight());
});

编辑：您可以将 tabParentHeight() 函数替换为：

$(".tabs").each(function() {

  var ph = $(this).outerHeight();
  $(this).find('.tab-content:first').css('min-height', 0);
  var ch = $(this).find('.tab-content:first').outerHeight();

  if (ch > ph) {
    $(this).css({
      'height': ch + 'px'
    });
  }
});

推荐阅读