在ul和ol

时间:2018-04-25 11:24:21

标签: ruby-on-rails ruby ruby-on-rails-4 html-lists nokogiri

我有一个场景,当li进入 ul 时,我需要用点(。)替换它,当li出现并且 ol 我需要替换它有一个数字。

但问题是 -

1)它不适用于嵌套的li

2)它在同一级别附加。相同级别意味着一旦找到li,它将首先添加点(。),然后它将添加数字

我想要什么

1)每当李进入ul时,它应该添加点(。)。

2)每当李进入ol时,它应该添加一个数字。

data = "<ol>\n<li>Introduction\n<ol>\n<li>hyy ssss</li>\n</ol>\n</li>\n<li>Description</li>\n<li>Observation</li>\n<li>Results</li>\n<li>Summary</li>\n</ol>\n<ul>\n<li>Introduction</li>\n<li>Description\n<ul>\n<li>Observation\n<ul>\n<li>Results\n<ul>\n<li>Summary</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Overview</li>\n</ul>\n<p>All the testing regarding bullet points would have been covered with the above content. Hence publishing this content will make an entry in in the selected  page, cricket page and so on.</p>\n"

    content = Nokogiri::HTML.parse(data)
    content.at('ul').children.xpath("//li").each { |li| li.inner_html="\u2022 "+li.inner_html }
    content.at('ol').children.xpath("//li").each_with_index { |li,index| li.inner_html="#{index} "+li.inner_html }

1 个答案:

答案 0 :(得分:1)

也许你需要这个:

content.css('ol').reverse.each do |ol| 
  ol.css('> li').each_with_index { |li,index| li.inner_html="#{index + 1} "+li.inner_html }
end
content.css('ul > li').reverse.each { |li| li.inner_html="\u2022 "+li.inner_html }

puts content

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body>
<ol>
  <li>1 Introduction
    <ol>
      <li>1 hyy ssss</li>
    </ol>
  </li>
  <li>2 Description</li>
  <li>3 Observation</li>
  <li>4 Results</li>
  <li>5 Summary</li>
</ol>
<ul>
  <li>• Introduction</li>
  <li>• Description
    <ul>
      <li>• Observation
        <ul>
          <li>• Results
            <ul>
              <li>• Summary</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>• Overview</li>
</ul>
</body></html>

reverse的原因 -
考虑一下dom:

<ul>
  <li>Description
    <ul>
      <li>Observation</li>
    </ul>
  </li>
</ul>

当你content.css('ul > li')时,你会按照[描述,观察]的顺序进行。如果没有reverse,则在运行代码段时,会更改说明,但这样做也会更改观察节点的object_id。然后,您更改了观察节点,该节点未在content中的任何位置引用。这就是为什么,我在父母面前扭转它并获得children。通过这样做,我确保我先改变了孩子,然后更改了父母,所以父母知道孩子的变化,并且在任何地方都没有未引用的节点。

假设描述的节点id是1234,观察node_id是2345.当你 mutated 描述时,它改变了自己,但也改变了它的孩子(2345)。新对象id可以分别为3456和4567。然后你改变了2345(通过迭代),但它没有任何效果,因为你的content显示了3456 - &gt; 4567

希望这是有道理的。