如何清理html列表中多余的项目符号
[英]how to clean up the extra bullets in lists in 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())
}
)
我想我正在寻找的条件是错误的。 直观地检查列表让我知道列表何时有额外的项目符号，但我真的无法弄清楚如何编写正确的选择器来清理列表 3 和 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”</li> <li>A “service segment”</li> </ul> </li> </ul> </li> </ul> </li> </ul> <strong>Expected Output:</strong> <ul class="expected"> <li>A “geographical segment”</li> <li>A “service segment”</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 的预期输出是：
仅供参考 - 这是我最后一个问题的后续行动，我得到了一个有用的答案，帮助我继续前进。
1 个解决方案
解决方案1
0 2020-09-08 07:21:47
不要使用.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”</li> <li>A “service segment”</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>
如何清理HTML / XML？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.