Modifier la propriété d'un élément en fonction du placement d'un autre élément - jQuery

Question

Je n'arrive pas à comprendre comment je peux cibler une edgecase super ennuyeuse.

Comment puis-je cibler le h1, qui vient après le tag cite? Comme cite est enveloppé à l'intérieur de la balise p, je ne sais pas comment traverser pour le cibler.

L'écart entre le cite (techniquement le p) est trop grand, mais sur les paragraphes 'non cite', c'est bien.

TL: DR - Vérifiez si un paragraphe a une étiquette cite à l'intérieur de celui-ci, alors si elle ne - changer le padding-top sur l'étiquette h1 à quelque chose de moins. Si le paragraphe n'a pas de cite à l'intérieur, ne le touchez pas.

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

Vous pouvez utiliser la méthode .has() ou :has sélecteur:

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

En supposant que tous les h1 prochains frères et sœurs du sélectionné p doit être sélectionné:

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

Answer 2

une autre façon serait de commencer par l'étiquette citer en utilisant ensuite utiliser .closest() pour se rendre à la balise p - alors obtenir la prochaine h1 élément

$('cite').closest('p').next('h1').css('padding-top','50px')