使用 JQuery 在 UL LI 列表中单击查找所有外部 UL 元素

Question

我有以下 UL LI 清单：-

<ul>
    <li><a href="#">item 1</a>
        <ul>
            <li><a href="#">item 2</a></li>
            <li><a href="#">item 3</a>
                <ul>
                    <li><a href="#">item 4</a></li>
                    <li><a href="#">item 5</a></li>
                </ul>
            </li>          
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
            <li><a href="#">item 8</a>
                <ul>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">item 11</a></li>
</ul>

什么，使用 JQuery，是从 LI 项中的一个 href 链接中识别每个 UL 的最简单方法？

例如，如果我单击第 9 项或第 10 项，我需要识别所有从链接周围的 UL 向后返回到最外层父级（但不包括父级）的 UL。

我只能让它找到最接近我单击的位置，因此在上面的示例中，单击第 9 项或第 10 项只会让我留在第一个最近的 UL，而不是除主根/父项之外的所有 UL。

谢谢，如果有人可以提供帮助。

萨姆

Answer 1

• 使用.parents()获取特定选择器的所有祖先
• 使用.closest()获取特定选择器的第一个祖先（或自身）

 $("ul a").on("click", function() { const $a = $(this); const $UL_parents = $a.parents("ul"); const $UL_closest = $a.closest("ul"); console.log($UL_parents.length, $UL_closest.length) });

 <ul> <li><a href="#">item 1</a> <ul> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a> <ul> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> </ul> </li> <li><a href="#">item 6</a></li> <li><a href="#">item 7</a></li> <li><a href="#">item 8</a> <ul> <li><a href="#">item 9</a></li> <li><a href="#">item 10</a></li> </ul> </li> </ul> </li> <li><a href="#">item 11</a></li> </ul> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>