如何清理html列表中多余的项目符号
[英]how to clean up the extra bullets in lists in html
问题描述
I have the following html generated by a program.
我有以下由程序生成的 html。 The program has wrapped up the lists with extra lists and that leads to extra bullets being visible on the HTML page.该程序已经用额外的列表包装了列表，这导致在 HTML 页面上可以看到额外的项目符号。 I am trying to clean up the lists so that only the valid list items stay and the extraneous surrounding lists are removed.我正在尝试清理列表，以便只保留有效的列表项，并删除无关的周围列表。
I wrote the following code which works for list1 and list2, but does not work for list3 and list4.我编写了以下代码，它适用于 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())
}
)
I guess that the condition I am looking for is wrong.我想我正在寻找的条件是错误的。 Visually inspecing the list gives me an idea of when a list has extra bullets, but I am not really able to figure out how to write the correct selectors for cleaning up list3 and 4.直观地检查列表让我知道列表何时有额外的项目符号，但我真的无法弄清楚如何编写正确的选择器来清理列表 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>
The expected output for list 3 is:列表 3 的预期输出是：
FYI - this is a follow-up to my last question for which I got a helpful answer that helped me move forward.仅供参考 - 这是我最后一个问题的后续行动，我得到了一个有用的答案，帮助我继续前进。
How to find the deepest ul/ol with list items in a nested list 如何使用嵌套列表中的列表项找到最深的 ul/ol
1 个解决方案
解决方案1
0 2020-09-08 07:21:47
Don't use .html() to get the elements' contents.不要使用.html()来获取元素的内容。 That will just return the contents of the first list item, not all of them.那只会返回第一个列表项的内容，而不是全部。
Use .append() to move the elements to the place where you want them, and .remove() to remove the extra elements.使用.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.