Question

我有一个简单的html代码：

<section class="main">
    <div class="container">
        <div class="row">
            <header class="verticalCenter">
            ...
            </header>
        </div>
    </div>
</section>

另外，我有这个jQuery：

function verticalCenter(el) {
    el.each(function() {
        var elHeight = $(this).outerHeight(true),
            parentHeight = $(this).parent('section').outerHeight(true),
            marginTop = (parentHeight - elHeight)/2;

        $(this).css('margin-top',marginTop);
    })
}

verticalCenter($('.verticalCenter'))

问题是 - jQuery没有看到section.main。我做错了什么？

Answer 1

您需要.closest()，而不是.parent()

  parentHeight = $(this).closest('section').outerHeight(true),

.parent()函数仅检查直接父级。有效地传递一个选择器意味着“让我得到父，但只有父母匹配这个选择器;否则，给我一个空列表。”

Answer 2

.parent()只能在DOM树上移动一级。在您的代码中，$(".verticalCenter")没有任何与选择器“section”匹配的直接父节点。

.closest()同时获得与传递的选择器匹配的最近祖先。

$(this).closest('section.main')

jQuery无法获得顶级父母？

2 个答案: