时间戳

首页 > 解决方案 > 如何使用嵌套列表中的列表项找到最深的 ul/ol

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

问题描述

我正在尝试清理由另一个创建了不必要的嵌套列表的程序生成的项目符号列表。我需要删除它们。这里有2个例子...

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <ul>
    <ul>
      <li>
        <ul>
          <li>List Item 1</li>
          <li>List Item 2</li>
        </ul>
      </li>
    </ul>
  </ul>
   <ul>
  <li>
    <ul>
      <li>
        <ul>
          <li>
            <ol>
              Prep Steps
              <li>Step 1</li>
              <li>Step 2</li>
              <li>Step 3</li>
            </ol>
            <ul>
              Other things to note
              <li>Another LI 1</li>
              <li>Another LI 2</li>
              <li>Another LI 3</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</body>

</html>

我需要找到具有有效列表项上下文（任何文本）的 ul/ol 并删除围绕它们的所有无关 ul。为此，我试图找到具有列表项的最深 ul。我尝试了一些选择器$("ul:has(li)")，但是这也返回了所有父 uls。

标签： javascripthtmljquery

解决方案

尝试这个：

    $('ul,ol').not(':has(ul,ol)')


$('ul,ol').not(':has(ul,ol)').each((index,list) => console.log(list));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <ul>
      <li>
        <ul>
          <li>List Item 1</li>
          <li>List Item 2</li>
        </ul>
      </li>
    </ul>
  </ul>
  <ul>
    <li>
      <ul>
        <li>
          <ul>
            <li>
              <ol>
                <li>Another LI 1</li>
                <li>Another LI 2</li>
                <li>Another LI 3</li>
              </ol>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

推荐阅读