如何使用 jQuery 找到嵌套子元素的根 li?

Question

我有这个导航：

<div class="collapse navbar-collapse" id="wire-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false">Our Company
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Safety
<span class="right-caret"></span>
</a>
</li>
<li class="dropdown-submenu">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
Customer Service
<span class="right-caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active">
<a href="#" target="_self">Customer
Satisfaction Index (CSI)</a>
</li>
</ul>
</li> 
</ul>
</li>      
</ul>

当用户在"客户满意度指数"页面(或"我们公司"的任何子页面(上时，我想加粗根元素"我们公司"。 如何使用CSS和/或jQuery来定位它？仅当用户位于该页面上时，才会应用类"active"。

提前谢谢。

Answer 1

$(".active").closest(".dropdown").find(".dropdown-toggle").css({"font-weight":"bold"});

解释：

$(".active")是起点。

.closest(".dropdown")以祖先列表中的<li class="dropdown">为目标。

.find(".dropdown-toggle")在上一个结果的子项中找到下面的内容。

<a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false">Our Company
<span class="caret"></span>
</a>

因此，您可以应用一些CSS：

.css({"font-weight":"bold"});

---

查找这些文档页面以获取更多信息：

.closest()、.find()、.css()