NoMethodError：#<Nokogiri::XML::NodeSet:0x007fbefee5e420> 的未定义方法“父”答案

【问题标题】：NoMethodError: undefined method `parent' for #<Nokogiri::XML::NodeSet:0x007fbefee5e420>NoMethodError：#<Nokogiri::XML::NodeSet:0x007fbefee5e420> 的未定义方法“父”
【发布时间】：2017-10-30 22:43:23
【问题描述】：

我有问题。我应该阅读一个 html，其中包含一个类名为“article_img”的图像，我应该能够将它作为其父级的兄弟姐妹。我的代码有效，但它在我的 test.html 中将两个图像与“div”放在同一级别，而不是将另一个“img”与“p”放在同一级别

这是我的代码：

require 'nokogiri'

doc = File.open('test.html') { |f| Nokogiri::HTML(f)}

doc.css('html').each do |element|
    img = element.css('img.article_img')
    parent = img.first.parent
    parent.before(img)
end

这是我的示例 html

<div>       
    <p>Lorem ipsum jne...<a href="#">link</a></p>

    <img class="article_img" src="image.jpg">

    <p>Lorem ipsum jne...<a href="#">link</a>
        <img class="article_img" src="image.png">
    </p>        

</div>

结果应该是这样的：

<img class="article_img" src="image.jpg">

<div>       
    <p>Lorem ipsum jne...<a href="#">link</a></p>

    <img class="article_img" src="image.png">

    <p>Lorem ipsum jne...<a href="#">link</a></p>       

</div>

【问题讨论】：

标签： html css ruby nokogiri

【解决方案1】：

我想我找到了答案：

doc.css('html').each do |element|
 images = element.css('img.article_img')
 images.each do |node|
    parent = node.parent
    parent.before(node)
 end
end

和更短的版本

doc.css('html').each do |element|
  element.css('img.article_img').each do |node|
    node.parent.before(node)
  end
end

【讨论】：

【解决方案2】：

我会这样做：

require 'nokogiri'

doc = Nokogiri::HTML(<<EOT)
<html>
  <body>
    <div>       
      <p>Lorem ipsum jne...<a href="#">link</a></p>
      <img class="article_img" src="image.jpg">
      <p>Lorem ipsum jne...<a href="#">link</a>
      <img class="article_img" src="image.png">
      </p>        
    </div>
  </body>
</html>
EOT

img = doc.at('img.article_img')
img.parent.add_previous_sibling(img)
puts doc.to_html

# >> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
# >> <html>
# >>   <body>
# >>     <img class="article_img" src="image.jpg"><div>       
# >>       <p>Lorem ipsum jne...<a href="#">link</a></p>
# >>       
# >>       <p>Lorem ipsum jne...<a href="#">link</a>
# >>       <img class="article_img" src="image.png">
# >>       </p>        
# >>     </div>
# >>   </body>
# >> </html>

doc.at('img.article_img') 找到第一个 <img class="article_img"...>。

我们在 HTML 中留下了一个空白，因为有一个尾随的 Text 节点包含在“漂亮 HTML”中看到的格式。修复这个问题留给读者作为练习。

【讨论】：