我在解决如何定位我拥有的超级烦人的边缘包时遇到了麻烦。

如何定位h1标记后的cite
由于cite包裹在p标记内,所以我不知道如何遍历以定位它。

cite(技术上为p)之间的间隙太大,但是在“非cite”段落中,这很好。

TL:DR-
检查段落中是否包含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;
}

最佳答案

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

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


假定应选择所选h1的所有下一个p兄弟姐妹:

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

关于jquery - 根据另一个元素的位置更改元素属性-jQuery,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18511694/

10-09 17:02