获取具有特定类的子元素的父级

【问题标题】：Get parent of a child element that has a certain class获取具有特定类的子元素的父级
【发布时间】：2010-12-14 03:39:28
【问题描述】：

我有一个这样的嵌套菜单：

<ul id="menu">
    <li>Home
        <ul>
            <li>New</li>
            <li class="selected">Open</li>
            <li>Folder</li>
        </ul>
    </li>
    <li>Another menu
        <ul>
            <li>submenu item 1</li>
            <li>submenu item 2</li>
            <li>submenu item 3</li>
        </ul>
    </li>
</ul>

现在我正在尝试更改第一个 LI 元素（包含 Home 的那个）的类，因为它有一个带有“选定”类的子元素。这可能使用jQuery吗？

【问题讨论】：

标签： jquery css css-selectors

【解决方案1】：

你可以用这个语法做到这一点。

$('.selected').parent().parent().addClass('foo').removeClass('bar');

【讨论】：

最好使用 .parents() 选择器
我看不出它会更好，你能举个例子吗？

【解决方案2】：

捕捉目标的更快、更精确的方法。

$("li.selected").parents("#menu").addClass('foo');

更新为第一个 li 孩子添加了一些类。

$("li.selected").parents("#menu").addClass('foo').find('li:first').addClass('bar');

我还建议阅读 jQuery Traversing 文档。

【讨论】：

我想为
Home 添加一个 CSS 类。我该怎么做？

如果您在“另一个菜单”中选择了任何<li>，这将不起作用

【解决方案3】：

试试

$('li.selected').parent().closest('li').addClass('foo');

编辑：对不起，只有使用最接近的才会使其成为目标。

或者你可以使用：

$('li.selected').closest('li:not(".selected")').addClass('foo');

【讨论】：