如何使用jQuery动态地将css line-height分配给嵌套对象？

Question

我正在开发一个水平的家谱。

当前步骤 - 根据嵌套内容指定CSS Line-Height以垂直居中每个项目。

问题 - 嵌套项的Line-Height值因继承而呈指数级增长。
我可以通过单独分配每个值来使其工作，但我正在寻找动态解决方案。

  

在此处查看我的演示代码 - http://jsfiddle.net/kirtcarter/TLJT9/

这是有问题的jQuery：

$(document).ready(function(){
    $("#familytree li").each(function(n) {
        var LineHeight = $(this).height()+'px';
        $(this).css({'line-height':LineHeight});
    });
});

期望的结果：

Answer 1

你应该沿着这些方向做点什么：

$(document).ready(function(){
    $(".item").each(function(n) {
        var newLineHeight = $(this).parent('.wrapper').height() +'px';
        $(this).css({'line-height':newLineHeight});
    });
});​

Answer 2

您需要以不同的顺序遍历对象 - 从孩子开始。

另外，在检查高度之前，您可能希望将line-height重置为1.

试试这个：

$($("#familytree li").get().reverse()).each(function(n) {
    var newLineHeight = $(this).height()+'px';
    //uncomment the following line and run to see issue
    $(this).css({'line-height':newLineHeight});
});

或者以更易读的方式：

var $elements = $("#familytree li");
var $elementsReversed = $($elements.get().reverse());
$elementsReversed.each(function(n) {
    var newLineHeight = $(this).height()+'px';
    //uncomment the following line and run to see issue
    $(this).css({'line-height':newLineHeight});
});

Demo here.

Answer 3

CSS

#familytree li{   line-height: 100%; }

看起来每个人都有明确的身高，所以这应该有效