html5如何循环取数据,提取HTML5数据属性

选项1：抓住所有数据元素

如果你需要的是列出页面的所有数据元素，这里是一个班轮：

Hash[doc.xpath("//span/@*[starts-with(name(), 'data-')]").map{|e| [e.name,e.value]}]

输出：

{"data-age"=>"50", "data-location"=>"London"}

选项2：组结果按标签

如果你想将你的结果通过标签(也许你需要做额外的处理每个标签)，您可以执行以下操作：

tags = []

datasets = "@*[starts-with(name(), 'data-')]"

#If you want any element, replace "span" with "*"

doc.xpath("//span[#{datasets}]").each do |tag|

tags << Hash[tag.xpath(datasets).map{|a| [a.name,a.value]}]

end

然后tags是一个ar包含键值哈希对，按标签分组。

方案3：行为像jQuery的数据集插件

如果你喜欢的插件式的方法，下面会给你每一个引入nokogiri节点上dataset方法。

module Nokogiri

module XML

class Node

def dataset

Hash[self.xpath("@*[starts-with(name(), 'data-')]").map{|a| [a.name,a.value]}]

end

end

end

end

然后你可以找到一个单一的元素数据集：

doc.at_css("span").dataset

或取得数据集的一组元素：

doc.css("span").map(&:dataset)

例子：

以下是dataset方法的行为 以上。鉴于在HTML下面几行：

Joe Bloggs

Jim Foggs

输出将是：

[

{"data-location"=>"London", "data-age"=>"50"},

{"data-location"=>"Oxford", "data-age"=>"40"}

]