jquery - 根据另一个元素的放置更改元素属性 - jQuery

Question

我无法弄清楚如何定位我遇到的 super 恼人的边缘情况。

我如何定位 cite 标签之后的 h1？由于 cite 被包裹在 p 标签内，我不知道如何遍历它。

cite(技术上是 p)之间的差距太大，但在“非cite”段落上，没问题.

长话短说 -检查段落中是否有 cite 标签，如果有 - 将 h1 标签上的 padding-top 更改为更少的内容。如果段落中没有 cite，请保持不变。

http://codepen.io/anon/pen/Jksam

HTML

<link href='http://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

<div class="post">
    <blockquote>
      <p>
          “Work is the curse of the drinking classes.”
      </p>
    </blockquote>

    <p>
      <cite>
          Oscar Wilde
      </cite>
    </p>

    <h1>
       This is a H1
    </h1>

    <p>
       Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    </p>

    <h1>
       This is a H1
    </h1>
</div>

CSS

.post {
  width: 50%;
  padding-left: 25%;
  padding-top: 3rem;
}

h1 {
  color: #333332;
  font-family: 'Lato', sans-serif;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  font-weight: 900;
  font-size: 3.3rem;
}

p + h1 {
  padding-top: 4rem;
}

blockquote {
  border-left: 4px solid #ED5565;
  margin-left: -24px;
  margin-top: -1px;
}

cite {
  color: #b3b3b1;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 0.8rem;
  position: relative;
  top: -15px;
  padding: 0;
  margin: 0;
}

cite:before {
  content: "- ";
}

blockquote > p {
  padding: 1em; 
  margin: 0;
}

p {
  color: #333332;
  font-family: 'Gentium Book Basic', serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.8rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

Answer 1

你可以使用.has()方法或者:has选择器:

$('p').has('cite').next('h1').css({'padding-top': 'value'});

假设应该选择所选 p 的所有下一个 h1 sibling :

$('p').has('cite').nextAll('h1').css({'padding-top': 'value'});