1

我有一个简单的 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. 我做错了什么？

4

2 回答 2

3

你想要.closest()，不是.parent()

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

该.parent()函数仅检查直接父级。将选择器传递给它实际上意味着，“给我父级，但前提是父级匹配这个选择器；否则，给我一个空列表。”

于 2013-09-21T11:41:21.410 回答
3

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

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

$(this).closest('section.main')
于 2013-09-21T11:43:30.460 回答