基于另一个元素的位置更改元素属性 - jQuery

我遇到问题的方法是如何针对我所拥有的超级烦人的边框。基于另一个元素的位置更改元素属性 - jQuery

我该如何锁定标签后的h1？由于cite被包裹在p标签内，所以我不知道如何遍历出它的目标。

cite（技术上p）之间的差距太大，但在'非cite'段落中，这很好。

TL：DR - 检查一个段落有它内部的一个cite标签，那么如果它 - 在h1标签更改填充顶的东西少。如果该段落内没有cite，请不要触摸它。

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; 
}

来源

2013-08-29 Ollie

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

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

假设选择p的所有未来h1兄弟姐妹应选择：

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

来源

2013-08-29 13:06:13 undefined

谢谢你救了我拉着所有的头发:) – Ollie

@Ollie欢迎您:) – undefined

另一种方法是使用再使用.closest()去p标签从引用标签开始 - 那么获得下H1元素

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

来源

2013-08-29 13:08:25

基于另一个元素的位置更改元素属性 - jQuery

回答

相关问题