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

时间:2013-01-19 00:11:48

标签: jquery height

我在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"})
})

哪种作品(包含&#34; px&#34;没有区别)但第一个跨度是正确的高度,但其他窗格中的所有其他跨度都太短。我正在使用outerHeight,因为我需要包含填充。这是我正在处理的页面:

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

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

提前致谢。

2 个答案:

答案 0 :(得分:0)

也许试试......

$(".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"})

答案 1 :(得分:0)

我弄清楚我哪里出错了。我的each函数设置得非常好,它与cycle初始化相关的位置是问题(它导致脚本在其后发生故障)。将cycle初始化最后放在我的块中(或者至少在我的每个函数之后)已按预期工作。如果有人看到这个问题谁在使用Cycle,请记下脚本的顺序,循环最后!