jQuery获取每个div元素的高度答案

【问题标题】：JQuery Get Height Of Each Div ElementjQuery获取每个div元素的高度
【发布时间】：2012-02-08 07:36:05
【问题描述】：

我有以下函数来获取具有特定 css 类的每个 div 元素的高度。每个容器都有一个由 div 元素组成的侧边按钮。我无法使用 css 设置按钮 div 的高度，因为它取决于容器 div 的高度，并且每个容器可以是不同的高度。所以我必须用jquery来做。我正在尝试根据容器的高度设置按钮的高度，使它们的高度相等。获取容器高度并将按钮高度设置为等于该高度。

你能帮忙吗？谢谢！

// sidebar button
function SideBarBtn(){
    $('.ContactWrap').each(function(){
        var FormHeight = $(this).outerHeight();
        var SideBtnHeight = FormHeight -25 + 'px';
        $('.SideBtn').css('height', SideBtnHeight);
        $('.SideBtn').fadeIn('slow').fadeOut('slow').fadeIn('slow');
    });
}

html:

<div class="ContactWrap">
   <a href="#submit" class="SideBtn"> S u b m i t - B a r</a>
   .....
</div>

【问题讨论】：

@usser1002039 很明显，相关的HTML代码。您包含.ContactWrap 和.SideBtn 的文档结构对于此答案非常重要。

标签： jquery height

【解决方案1】：

问题是由以下几行引起的：

$('.SideBtn').css('height', SideBtnHeight);
$('.SideBtn').fadeIn('slow').fadeOut('slow').fadeIn('slow');

这些选择器选择 all 类为 SideBtn 的元素，并对其应用新样式。要解决这个问题，你必须使用更具体的选择器。

正确的代码是：

var $btn = $(this).find('.SideBtn');
$btn.css('height', SideBtnHeight);
$btn.fadeIn('slow').fadeOut('slow').fadeIn('slow');

【讨论】：

我不确定我是否理解。我需要根据容器高度设置按钮高度。这似乎设置了容器高度。
此代码基于您问题中的代码。你能展示你的相关 HTML 代码吗？
谢谢！，我也刚想通了... var mcSideBtn = $('.mcSideBtn', this);
仅供参考，$('.mcSideBtn', this) 是 $(this).find('.mcSideBtn') 的缩写。

【解决方案2】：

您正在循环使用类.ContactWrap 的元素，但是将高度变化和fadeIn、fadeOut、fadeIn 应用于类.SideBtn 的所有元素。所以每次.each() 循环迭代时，它都会调用.css() 和每个.SideBtn 元素上的淡入淡出函数。这就是为什么高度总是最终成为您为SideBtnHeight 获得的最后一个值。您实际上得到了所有不同的值，但只有最后一个值。

【讨论】：