基於另一個元素的位置更改元素屬性 - 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

回答

相關問題