jquery - 如何确定元素是否在内容块的顶部

我想看看是否有一种方法可以确定内容块顶部是否有一个元素，并以该元素为目标来执行一些CSS。我要定位的元素是H2

因此，基本上，我有一个包含内容的内容块，如下所示：

<div class="content">
    <h2>text<h2>
    <p>text text text</p>

    <h2>text<h2>
    <p>text text text</p>

    <h2>text<h2>
    <p>text text text</p>
</div>

.h2 {
    padding: 20px;
}

我想要一种执行类似的内容的方法

“如果H2元素位于内容div的最顶部，则为其提供padding的0”，使用jQuery或CSS。

我知道您可能在想为什么不只使用.content h2:first-child？

我之所以不这样做，是因为网站上其他地方的另一个内容块可能看起来像：

<div class="content">
    <p>text text text</p>

    <h2>text<h2>
    <p>text text text</p>

    <h2>text<h2>
    <p>text text text</p>
</div>

使用first-child将给出第一段之后的H2-p-0的padding。我只需要div最顶部的H2将padding设置为0。

最佳答案

由于您已标记了jQuery，因此这里是jQuery解决方案：

$('.content').each(function() {
if($(this).children()[0].nodeName=='H2') {
$(this).children().first().css('color','red'); //set padding in your case
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<h2>text</h2>
    <p>text text text</p>

<h2>text</h2>
    <p>text text text</p>

<h2>text</h2>
    <p>text text text</p>

</div>

<div class="content">
    <p>text text text</p>

<h2>text</h2>
    <p>text text text</p>

<h2>text</h2>
    <p>text text text</p>
</div>

关于jquery - 如何确定元素是否在内容块的顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41703679/