如何清理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.