jQuery - 为每个实例独立地将每个元素高度设置为子元素高度答案

【问题标题】：jQuery - independently set each element height to child element height for each instancejQuery - 为每个实例独立地将每个元素高度设置为子元素高度
【发布时间】：2013-01-30 20:01:13
【问题描述】：

我在一个 jQuery 循环实例中有多个 html 块，如下所示：

<div class="pane" id="...">
 <div class="title">
  <span>...</span>
  <div class="sS">...</div>
 </div>
</div>

.pane 是循环幻灯片。我想独立地获取每个跨度的高度（因为它们包含不同数量的文本，所以有些会在较小的屏幕上换成两行）。

计算出高度后，我想将此值应用到父 .title 的高度 - 独立（无需根据 ID 为每个窗格手动计算）。

到目前为止我有：

 $(".pane").each(function() {
    var tpheight =  $(this).find("span").outerHeight()
    $(this).find(".title").css({"height" : tpheight + "px"})
})

哪种类型的作品（包含“px”没有区别）但第一个跨度显示为正确的高度，但其他窗格中的所有其他跨度都太短了。我正在使用outerHeight，因为我需要包含填充。这是我正在处理的页面：

http://test.soundvaultstudios.co.uk/services

许多其他帖子都谈到了获取最高元素的高度并将该值应用于所有其他元素，但我希望这些值都独立计算出来。我这样做的原因是，当您将鼠标悬停在窗格上时，标题 div 的样式为 height:auto 以显示 .sS 的内容，然后在 mouseleave 上，标题 div 的高度恢复为跨度的高度.我希望这是有道理的，看看网站，看看我的意思。然而，悬停功能会产生正确的高度变化，但我希望页面以相同的方式加载。

提前致谢。

【问题讨论】：

查看页面，您的 javascript 似乎存在更大的问题。在查看某些标题时，当您将鼠标悬停在较大的标题上时，它会移动，而将鼠标悬停在较小的标题上然后它会掉下来，标题就会被隐藏起来。看来您可能需要完全重新编写代码。如果我错了，请告诉我。
嗨，ntg，我的代码实际上非常简单，尽我所能做到的简单，循环功能正是我想要的。我设置的悬停功能完全可以做到，只是页面加载没有。
嗨，乔，当我查看您的网站时，脚本变得非常有问题。尝试重新加载页面，将鼠标悬停以使悬停起作用，等待循环发生几次，然后将鼠标悬停在外面，您会看到标题被掩埋得低于应有的位置。我理解这很简单，但您似乎还需要解决其他问题才能完成所需的操作。

标签： jquery height

【解决方案1】：

也许可以试试……

$(".pane").each(function() {
    var tpheight =  $(this).find("span").outerHeight()
    $(this).find(".title").outerHeight(tpheight);
 })

另外，如果你要设置 css，它应该是......

 $(this).find(".title").css("height",tpheight)

不是……

$(this).find(".title").css({"height" : tpheight + "px"})

【讨论】：

嗨 Sam，很遗憾我已经尝试过使用 .outerHeight、.height 以及 CSS，它们都具有相同的效果。问题在于每个循环函数，而不是我用来设置高度的函数。不过感谢您的尝试。

【解决方案2】：

我知道我哪里出错了。我的each 函数设置得非常好，问题在于它相对于cycle 初始化的位置（它导致放置在它之后的脚本出现故障）。将cycle 初始化放在我的块中的最后（或至少在我的每个函数之后）已按我的预期工作。如果有人在使用 Cycle 时看到此问题，请记下脚本的顺序，Cycle 最后！

【讨论】：