在氚中，我如何選擇上一個/下一個元素？

Question

我正在使用Moovweb SDK來轉換網站，並且我有許多頁面的內容與此格式匹配。有一個<h2>開始一個部分，該部分有一個隨機數<p>元素。

由於這些元素沒有屬性，我無法按類或ID進行選擇。我想選擇每個部分中的第一個也是最後一個<p>。我不想手動選擇像$('./p[1]')，$('./p[4]')等...有沒有一種方法來選擇每個<h2>之前和之後的元素？

<div> 
    <h2>This is a heading</h2> 
    <p>Here is some content</p> 
    <p>Meh</p> 
    <p>Here's another paragraph</p> 
    <p>Important sentence because it's the last one</p> 
    <h2>Here's a subheading</h2> 
    <p>Topic sentence</p> 
    <p>Bleh bleh bleh</p> 
    <p>Hurray, this fragment.</p> 
    <p>May the Force be with you</p> 
    <p>Moovweb rocks!</p> 
    <h2>New heading</h2> 
    <p>More awesome content here</p> 
    <p>Why is there so much stuff?</p> 
    <h2>The end</h2> 
    <p>Or is it?</p> 
</div> 

Answer 1

您可以使用preceding-sibling和following-sibling選擇XPath中做到這一點！

的代碼會是這個樣子：

$("./div"){ 
    $("./h2") { 
    $("following-sibling::p[1]") { # first p after h2 
     # do stuff 
    } 
    $("preceding-sibling::p[1]") { # first p before h2 
     # do stuff 
    } 
    } 
} 

見這個例子，我在氚測試創建：http://tester.tritium.io/dc25a419ac15fad70fba6fd3d3a9b512cb8430e8