时间戳

首页 > 解决方案 > 如何清理html列表中多余的项目符号

javascript - 如何清理html列表中多余的项目符号

问题描述

我有一个程序生成的以下html。该程序用额外的列表包裹了列表，这导致在 HTML 页面上可以看到额外的项目符号。我正在尝试清理列表，以便仅保留有效的列表项并删除无关的周围列表。

我编写了以下代码，它适用于 list1 和 list2，但不适用于 list3 和 list4。

$("body>ul, body>ol").each(
    function removeExtraneousLists(index, element) {
        $element = $(element);

        $leafList = $element.find("ul, ol").not(":has(ul,ol)");
        $element.html($leafList.html())

    }
)

我想我正在寻找的条件是错误的。目视检查列表让我知道列表何时有额外的项目符号，但我真的不知道如何编写正确的选择器来清理 list3 和 4。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .expected {
      background-color: palegoldenrod;
      border: dashed 1px;
    }
  </style>
</head>

<body>
  <ul id="list1">
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ol>
                <li>Currency 1</li>
                <li>Currency 2</li>
                <li>Currency 3</li>
              </ol>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <strong>Expected Output:</strong>
  <ol class="expected">
    <li>Currency 1</li>
    <li>Currency 2</li>
    <li>Currency 3</li>
  </ol>
  <hr />
  <ul id="list2">
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ul>
                <li>A “geographical segment”&lt;/li>
                <li>A “service segment”&lt;/li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <strong>Expected Output:</strong>
  <ul class="expected">
    <li>A “geographical segment”&lt;/li>
    <li>A “service segment”&lt;/li>
  </ul>
  <hr />
  <ul id="list3">
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ul>
                <li>
                  For every request for clearance :
                  <ul>
                    <li>Prereq1</li>
                    <li>PreReq2</li>
                    <li>PreReq3</li>
                    <li>
                      PreReq4 (<a href="#_bookmark83">Refer to this</a>)
                    </li>
                  </ul>
                </li>
                <li>
                  For every request for approval:
                  <ul>
                    <li>Approval Prereq1</li>
                    <li>Approval Prereq2</li>
                  </ul>
                </li>
                <li>Date of the last approval; and</li>
                <li>Names and signatures of approval committee.</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <strong>Expected Output:</strong>
  <ul class="expected">
    <li>
      For every request for clearance :
      <ul>
        <li>Prereq1</li>
        <li>PreReq2</li>
        <li>PreReq3</li>
        <li>PreReq4 (<a href="#_bookmark83">Refer to this</a>)</li>
      </ul>
    </li>
    <li>
      For every request for approval:
      <ul>
        <li>Approval Prereq1</li>
        <li>Approval Prereq2</li>
      </ul>
    </li>
    <li>Date of the last approval; and</li>
    <li>Names and signatures of approval committee.</li>
  </ul>
  <hr />
  <p>In particular, when setting up a new block:</p>
  <ol id="list4">
    <li>
      the approver shall:
      <ul>
        <li>
          ensure compliance with
          <a href="#_bookmark73">Another List</a>;
        </li>
        <li>appoint a delegation;</li>
      </ul>
    </li>
    <li>
      the requester shall:
      <ul>
        <li>ensure that he makes a request;</li>
        <li>
          <a id="requester"></a>
          <a id="_bookmark133"></a>ensure that he submits the letter by hardcopy;
        </li>
        <li>
          assist the approver in regularly:
          <ul>
            <li>reviewing the current status of his request</li>
            <li>reviewing the weekly progress</li>
            <li>reviewing the final closure</li>
          </ul>
        </li>
      </ul>
    </li>
  </ol>
  <strong>Expected Output:</strong>
  <p class="expected">Exactly the same list with no change</p>

  <hr />
</body>

</html>

列表 3 的预期输出是：

仅供参考 - 这是我上一个问题的后续问题，我得到了一个有用的答案，帮助我继续前进。

如何使用嵌套列表中的列表项找到最深的 ul/ol

标签： javascripthtmljquerydom

解决方案

不要.html()用于获取元素的内容。这将只返回第一个列表项的内容，而不是全部。

用于.append()将元素移动到您想要的位置，并.remove()删除多余的元素。

$("body>ul, body>ol").each(
  function removeExtraneousLists(index, element) {
    $element = $(element);
    $leafList = $element.find("ul, ol").not(":has(ul,ol)").find("li");
    $element.empty().append($leafList);
  }
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <ul id="list1">
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ol>
                <li>Currency 1</li>
                <li>Currency 2</li>
                <li>Currency 3</li>
              </ol>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <hr />
  <ul id="list2">
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ul>
                <li>A “geographical segment”&lt;/li>
                <li>A “service segment”&lt;/li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <hr />
  <ul id="list3">
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ul>
                <li>
                  For every request for clearance :
                  <ul>
                    <li>Prereq1</li>
                    <li>PreReq2</li>
                    <li>PreReq3</li>
                    <li>
                      PreReq4 (<a href="#_bookmark83">Refer to this</a>)
                    </li>
                  </ul>
                </li>
                <li>
                  For every request for approval:
                  <ul>
                    <li>Approval Prereq1</li>
                    <li>Approval Prereq2</li>
                  </ul>
                </li>
                <li>Date of the last approval; and</li>
                <li>Names and signatures of approval committee.</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <hr />
  <p>In particular, when setting up a new block:</p>
  <ol id="list4">
    <li>
      the approver shall:
      <ul>
        <li>
          ensure compliance with
          <a href="#_bookmark73">Another List</a>;
        </li>
        <li>appoint a delegation;</li>
      </ul>
    </li>
    <li>
      the requester shall:
      <ul>
        <li>ensure that he makes a request;</li>
        <li>
          <a id="requester"></a>
          <a id="_bookmark133"></a>ensure that he submits the letter by hardcopy;
        </li>
        <li>
          assist the approver in regularly:
          <ul>
            <li>reviewing the current status of his request</li>
            <li>reviewing the weekly progress</li>
            <li>reviewing the final closure</li>
          </ul>
        </li>
      </ul>
    </li>
  </ol>
  <hr />
</body>

</html>

推荐阅读