Question

我有一些JQuery找到最高元素的高度，并将该高度添加到更短的元素。我需要使用现有的Jquery将类main-nav-special-padding添加到更短的元素中。我采取了刺，但它没有奏效。任何帮助深表感谢。这就是我所拥有的： HTML

$(document).ready(function() {
  var maxHeight = -1;
  var element = $('.navbar-nav li a');

  element.each(function() {
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    if (maxHeight < $(this).height()) {
      element.addClass('main-nav-special-padding');
    }
  });

  element.each(function() {
    $(this).height(maxHeight);
  });
});

.main-nav-special-padding {
  padding-top: 1rem;
  background-color: red;
}

a.nav-button:link {
  color: #ffffff;
  background: transparent;
  padding: .5rem 10px;
  border-radius: 4px;
  border: 2px solid #ffffff;
  margin: 2px 6px;
  cursor: pointer;
  transform: scale(1);
  transition: transform .3s;
  outline: none;
  text-decoration: none;
  display: inline-block;
  font-size: 1.1em;
  text-align: center;
  line-height: 1em;
}

a.nav-button:visited {
  color: #ffffff;
  background: transparent;
  padding: 6px 10px;
  border-radius: 4px;
  border: 2px solid #ffffff;
  margin: 2px 6px;
  cursor: pointer;
  transform: scale(1);
  transition: transform .3s;
  outline: none;
  display: inline-block;
  font-size: 1.1em;
  text-align: center;
  line-height: 1em;
}

a.nav-button:hover {
  color: #2fa4e7;
  background: transparent;
  padding: 6px 10px;
  border-radius: 4px;
  border: 2px solid #2fa4e7;
  margin: 2px 6px;
  cursor: pointer;
  transform: scale(1.05);
  transition: transform .3s;
  outline: none;
  display: inline-block;
  font-size: 1.1em;
  text-align: center;
  line-height: 1em;
}

a.nav-button:active {
  color: #0f395a;
  background: transparent;
  padding: 6px 10px;
  border-radius: 4px;
  border: 2px solid #ffffff;
  margin: 2px 6px;
  cursor: pointer;
  transform: scale(1);
  transition: transform .3s;
  outline: none;
  display: inline-block;
  font-size: 1.1em;
  text-align: center;
  line-height: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navbar-nav ml-auto">
  <li><a href='Pending_Applications.aspx' class="nav-button" id="toPendingApps">Pending
                            Applications</a></li>
  <li><a href='Pending_Contracts.aspx' class="nav-button" id="toPendingContracts">Pending
                            Contracts</a> </li>
  <li><a href='Completed_Loans.aspx' class="nav-button-at" id="toCompletedLoans">Completed
                            Loans</a> </li>
  <li><a href='Dealer_Listing.aspx' class="nav-button" id="toDealerListing">Dealer Listing</a>
  </li>
  <li><a href='Corporate_Account_Profiles.aspx' class="nav-button" id="toCorporateAccounts">
                            Corporate
                            Accounts</a></li>
  <li><a href='Sales_Activity.aspx' class="nav-button" id="toSalesAcivity">Activity</a>
  </li>
  <li><a href='Historical_Sales.aspx' class="nav-button" id="toHistoricalSales">History</a>
  </li>
  <li><a href='Sales_Staff_Promotions.aspx' class="nav-button" id="toSalesPromotions">
                            Promotions</a> </li>
  <li><a href='Sales_Staff_Profile.aspx' class="nav-button" id="toSalesProfile">My Profile</a>
  </li>
</ul>

Answer 1

我复制了你的代码并获得了这个（在更改背景颜色后）：

我不确定你的意思是计算高度，因为每个元素的高度看起来都是一样的。如果你的意思是宽度，你可以添加这个css：

.navbar-nav{
    width: 200px;
}
.nav-button{
    width: 100%;
}
.navbar-nav li {
    list-style-type: none;
}

为您提供200像素宽<ul>，每个<li>将填充宽度。它还包含<li>项目上的项目符号。如果您希望元素排成左边而不是中心，请执行以下操作：

a.nav-button:link, 
a.nav-button:visited, 
a.nav-button:hover, 
a.nav-button:active {
         text-align: center;   
}

我不确定这是否解决了您的问题。我只是对你试图解决的“高度”感到困惑。 @huangism是正确的，使用flexbox会使你的大部分CSS变得不必要。但那是另一个时间的主题。祝好运！

Answer 2

关于这个：

element.each(function() {
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    if (maxHeight < $(this).height()) {
        element.addClass('main-nav-special-padding');
    }
});

maxHeight始终>= $(this).height()。所以元素不要添加类。您可以编辑为：

  element.each(function() {
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
  });

  element.each(function() {
    if (maxHeight > $(this).height()) {
      element.addClass('main-nav-special-padding');
    }
    $(this).height(maxHeight);
  });

将类添加到更短的元素。

将类添加到最短元素

2 个答案: