如何使用機械化和nokogiri紅寶石

Question

給出下面的示例，任何人都可以告訴我如何使用Nokogiri和機械化來獲得每個<h4>標籤下的所有鏈接，分別在I.E.

1. 「一些文本」
2. 「一些文字」
3. 「一些額外的文本」

<div id="right_holder"> 
    <h3><a href="#"><img src="http://example.com" width="11" height="11"></a></h3> 
    <br /> 
    <br /> 
    <h4><a href="#">Some text</a></h4> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <br /> 
    <br /> 
    <h4><a href="#">Some more text</a></h4> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <br /> 
    <br /> 
    <h4><a href="#">Some additional text</a></h4> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
    <a href="#" alt="name of item"><img src="http://some.image.com" class="class1"></a> 
</div> 

Answer 1

你可以去通過，並區分數據：下的所有鏈接像「How to split a HTML document using Nokogiri?」，但如果你知道標籤是什麼，你可以只是split它：

# html is the raw html string 
html.split('<h4').map{|g| Nokogiri::HTML::DocumentFragment.parse(g).css('a') } 

---

page = Nokogiri::HTML(html).css("#right_holder") 
links = page.children.inject([]) do |link_hash, child| 
    if child.name == 'h4' 
    name = child.text 
    link_hash << { :name => name, :content => ""} 
    end 

    next link_hash if link_hash.empty? 
    link_hash.last[:content] << child.to_xhtml 
    link_hash 
end 

grouped_hsh = links.inject({}) do |hsh, link| 
    hsh[link[:name]] = Nokogiri::HTML::DocumentFragment.parse(link[:content]).css('a') 
    hsh 
end 

# {"Some text"=>[#<Nokogiri::XML::Element:0x3ff4860d6c30, 
# "Some more text"=>[#<Nokogiri::XML::Element:0x3ff486096c20..., 
# "Some additional text"=>[#<Nokogiri::XML::Element:0x3ff486f2de78...} 

Answer 2

一般來說，你會怎麼做：

page.search('h4 a').each do |a| 
    puts a[:href] 
end 

但我敢肯定你已經注意到，沒有這些鏈接其實去任何地方。

更新：

將它們分組怎麼樣的一些節點集數學：

page.search('h4').each do |h4| 
    puts h4.text 
    (h4.search('~ a') - h4.search('~ h4 ~ a')).each do |a| 
    puts a.text 
    end 
end 

這意味着每a下面的h4，不也跟着另一個h4