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

您可以使用XPath中的preceding-sibling和following-sibling选择器来执行此操作！

代码看起来像这样：

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

请参阅我在Tritium Tester中创建的示例：http://tester.tritium.io/dc25a419ac15fad70fba6fd3d3a9b512cb8430e8

在Tritium中，如何选择上一个/下一个元素？

1 个答案: