从C#中的链接列表递归创建accordion html

时间:2013-07-08 19:17:32

标签: c# recursion html-lists html-agility-pack

我正在抓取一个链接的远程页面,我在列表中。我正在尝试将jlecery手风琴的列表打印出来。我有html没有问题,但我的循环有点偏,没有正确嵌套。

以下是List的示例:

<a href="#heading1">Heading 1</a>
<a href="link1.html">link1</a>
<a href="link2.html">link2</a>
<a href="link3.html">link3</a>
<a href="#heading2">Heading 2</a>
<a href="link4.html">link4</a>
<a href="link5.html">link5</a>
<a href="link6.html">link6</a>

所以这就是我需要如何获得格式化的HTML:

<div data-role="collapsible" data-collapsed="true">
<h3>Heading 1</h3>
<p>
  <ul>
    <li><a href="link1.html">link1</a></li>
    <li><a href="link2.html">link2</a></li>
    <li><a href="link3.html">link3</a></li>
  </ul>
</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Heading 2</h3>
<p>
  <ul>
    <li><a href="link4.html">link4</a></li>
    <li><a href="link5.html">link5</a></li>
    <li><a href="link6.html">link6</a></li>
  </ul>
</p>
</div>

这是我到目前为止的代码,应该提到我正在使用HTMLAgilityPack:

HtmlNodeCollection OneHome = document.DocumentNode.SelectNodes("//div[@id='accordion1']");
        var OneHomelinks = OneHome.Descendants("a")
                .Select(a => a.OuterHtml)
                .ToList();

        foreach (string link in OneHomelinks)
        {

            if (link.Contains('#'))
            {
                Response.Write("<div data-role=\"collapsible\" data-collapsed=\"true\">");
                Response.Write("<h3>" + link + "</h3>");
                Response.Write("<p>");
                Response.Write("<ul>");
            }

            if (!link.Contains('#'))
            {
                Response.Write("<li>" + link + "</li>");
            } else {
                Response.Write("</ul>");
                Response.Write("</p>");
                Response.Write("</div>");
            }

        }

基本上我试图通过在href中使用'#'来取出标题,然后重置那个点 - 但是有些东西是关闭的,列表没有正确形成。任何帮助都非常感谢!

当前输出

<div data-role="collapsible" data-collapsed="true">
<h3>Heading 1</h3>
<p></p>
 <ul></ul>
<p></p>
</div>
<li><a href="link1.html>link1</a></li>
<li><a href="link2.html>link2</a></li>
<li><a href="link3.html>link3</a></li>
<div data-role="collapsible" data-collapsed="true">
<h3>Heading 2</h3>
<p></p>
 <ul></ul>
<p></p>
</div>
<li><a href="link4.html>link4</a></li>
<li><a href="link5.html>link5</a></li>
<li><a href="link6.html>link6</a></li>

1 个答案:

答案 0 :(得分:1)

编辑:错误的逻辑,哎呀!

编辑2:再次使用逻辑放置。

我认为这应该适合你:

HtmlNodeCollection OneHome = document.DocumentNode.SelectNodes("//div[@id='accordion1']");
    var OneHomelinks = OneHome.Descendants("a")
            .Select(a => a.OuterHtml)
            .ToList();
    var headerCount = 0;
    foreach (string link in OneHomelinks)
    {
        var prevCounter = headerCount;
        if (link.Contains('#'))
        {
            headerCount++;

            if (headerCount != 1 && headerCount > prevCounter) {
                Response.Write("</ul>");
                Response.Write("</p>");
                Response.Write("</div>");
            }

            Response.Write("<div data-role=\"collapsible\" data-collapsed=\"true\">");
            Response.Write("<h3>" + link + "</h3>");
            Response.Write("<p>");
            Response.Write("<ul>");


        }
        else {
            Response.Write("<li>" + link + "</li>");
        } 
    }
    Response.Write("</ul>");
    Response.Write("</p>");
    Response.Write("</div>");