如何选择特定类型元素的父级？

Posted 2023-03-29

【中文标题】如何选择特定类型元素的父级？

【英文标题】：How do I select the parent of a specific type of element?

【发布时间】：2013-06-28 09:49:12

【问题描述】：

<table>
  <tbody>
    <tr>
      <td>
        Product Name
      </td>
    </tr>
    <tr>
      <td>
        Apple
      </td>
    </tr>
    <tr>
      <td>
        Dell
      </td>
    </tr>
    <tr>
      <td>
        HP
      </td>
    </tr>
  </tbody>
</table>

从上面的 html 代码中，我应该能够执行以下操作：

page.search('td').text_includes('HP').last.up('tbody')

我可以通过在该<td> 上多次调用parent 来做到这一点，但我想遍历直到找到<tbody> 并获得该元素。 jQuery 有这个能力，但我不知道如何用 Nokogiri 做到这一点。

【问题讨论】：

原始 HTML 真的有 <tbody> 标记还是您使用的浏览器插入了它？该特定标签在野外很少见，但浏览器会假装它在那里。这是尝试解析 HTML 表格时的常见问题。

【参考方案1】：

我要去：

page.at('td[text()*="HP"]').ancestors('tbody')[0]

【讨论】：

+1。可读且干净。我给它 8 分，因为我可以跟着它跳舞。

【参考方案2】：

XPath 让这变得更容易

tbody = page.xpath '//tbody[tr/td[contains(.,"HP")]]'

【讨论】：

没错但是html人喜欢用css

@pguardiario：偏爱错误的工具并不是使用它的借口。

Css 是与 html 一起使用的错误工具吗？如果我看到用 xpath 编写的样式表，我会相信 :)

@pguardino：不幸的是，要获得 CSS 属性声明，您需要应用 CSS 选择器。我敢肯定有很多人会乐于使用 XPath 选择器。看到 XPath 可以做什么，CSS 越来越接近具有不同语法的相同功能。即使使用 CSS3，您自己的解决方案的 text() 伪属性和 ancestors 都不可能。

好的，我同意 css 与 xpath 具有接近相同的功能，但通常更适合 html。听起来我们同意。

【参考方案3】：

这样的东西应该可以工作

page.search('td').text_includes('HP').xpath('./ancestor::tbody[1]')

【参考方案4】：

见Nokogiri equivalent of jQuery closest() method for finding first matching ancestor in tree

例如：

src = (element.ancestors('table').first ||  )['src']

或在轨道中：

src = element.ancestors('table').first.try(:fetch, 'src')