在另一个元素后找到最接近的元

Question

我正在尝试使用Nokogiri获取与网页的第一个<img>标记最接近的第一张图片<p>。我将使用结果显示文章摘要和Facebook共享链接。

我用来获取文章的第一个<p>标记的代码如下：

doc = Nokogiri::HTML(open(@url))
@title = doc.css('title').text
@content = doc.css('p').first

Answer 1

找到<img>

内的第一个<p>

如果您还没有/需要<p>元素，请执行以下操作：

first_img_in_p = doc.at_css('p img')
first_img_in_p = doc.at_xpath('//p//img')

请注意，您可以使用at_css代替at_xpath或at，并让Nokogiri从字符串中找出它，如果它是CSS或XPath表达式。

找到第一个 <img>

内的第一个<p>

如果您已有父节点，则可以使用以下任一方法：

first_p     = doc.at('p')  # Better than finding all <p> and then reducing
first_image = first_p.at_css('img')
first_image = first_p.at_xpath('.//img')

然而，有了这些答案（与前两个不同），如果第一个p没有图像，则根本找不到任何图像。

查找文档中的第一个<img>

如果你真的只想要第一个<img>任何地方（可能不在<p>或第一个<p>），那么只需：

first_image = doc.at('img')

如果你想让文档中至少有一个<p>出现在它之前的某个地方，但不一定是<img>的包装...那么这样说我可以编辑答案进一步

找到前面有<img>的第一个<p>（或作为祖先）

修改：根据您的评论，我认为您需要：

img = doc.at_xpath('//img[preceding::p or ancestor::p]')

这表示“查找文档中的第一个<img>，<p>出现在before it（但不是祖先），或者有祖先<p> }“。

以下是一些测试用例，因此您可以决定这是否是您想要的：

require 'nokogiri'
[
  %Q{<r><p><img id="a"/></p></r>},
  %Q{<r><img id="z"/><p></p></r>},
  %Q{<r><img id="z"/><p><img id="a"/></p></r>},
  %Q{<r><img id="z"/><p></p><p><img id="a"/></p></r>},
  %Q{<r><p></p><p><img id="a"/></p></r>},
  %Q{<r><img id="z"/><p></p><p><img id="a"/></p></r>},
  %Q{<r><p></p><img id="a"/></r>},
  %Q{<r><img id="z"/><p></p><img id="a"/></r>},
  %Q{<r><p></p><b><c><img id="a"/></c></b></r>},
  %Q{<r><q><p></p></q><b><c><img id="a"/></c></b></r>},
  %Q{<r><p><img id="a"/></p><img id="z"/></r>},
  %Q{<r><p><img id="a"/></p><p><img id="z"/></p></r>},
].each do |xml|
  doc = Nokogiri.XML(xml)
  img = doc.at_xpath('//img[preceding::p or ancestor::p]')
  puts "%-50s %s" % [ xml, img||NONE ]
end

#=> <r><p><img id="a"/></p></r>                        <img id="a"/>
#=> <r><img id="z"/><p></p></r>                        NONE
#=> <r><img id="z"/><p><img id="a"/></p></r>           <img id="a"/>
#=> <r><img id="z"/><p></p><p><img id="a"/></p></r>    <img id="a"/>
#=> <r><p></p><p><img id="a"/></p></r>                 <img id="a"/>
#=> <r><img id="z"/><p></p><p><img id="a"/></p></r>    <img id="a"/>
#=> <r><p></p><img id="a"/></r>                        <img id="a"/>
#=> <r><img id="z"/><p></p><img id="a"/></r>           <img id="a"/>
#=> <r><p></p><b><c><img id="a"/></c></b></r>          <img id="a"/>
#=> <r><q><p></p></q><b><c><img id="a"/></c></b></r>   <img id="a"/>
#=> <r><p><img id="a"/></p><img id="z"/></r>           <img id="a"/>
#=> <r><p><img id="a"/></p><p><img id="z"/></p></r>    <img id="a"/>

Answer 2

如果你正在寻找一个img的兄弟姐妹。     @ content.parent.css（ '＆GT; IMG'）