jquery - 如何使用 jQuery 为嵌套对象动态分配 css 行高？

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});
});

演示在这里。

Answer 3

css

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

看起来每一个都有一个明确的高度，所以这应该工作