从C#中的链接列表中递归地创建手风琴式html

本文关键字：创建 手风琴 html 列表 链接 递归 | 更新日期: 2023-09-27 18:21:37

我正在一个远程页面上抓取链接，我在列表中有这些链接。我正试图打印出jquery手风琴所需的列表。我的html没有问题，但我的循环有点偏离，没有正确嵌套。

以下是列表示例：

<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中使用"#"来提取Headings，并在这一点上重置-但有些东西不对劲，列表的格式不正确。非常感谢您的帮助！

电流输出

<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>

从C#中的链接列表中递归地创建手风琴式html

编辑：逻辑在错误的地方，哇！

编辑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>");
相关文章：