根据 HREF 值切换父元素的类 jQuery答案

【问题标题】：Toggle parent element's class jQuery based on HREF value根据 HREF 值切换父元素的类 jQuery
【发布时间】：2013-04-16 16:13:24
【问题描述】：

正如您所说，我今天正在学习 jQuery（以及其他网络内容）。

当我拥有的变量与 LI 中 A 上的 HREF 的内容匹配时，我正试图巧妙地将 LI 的类更改为活动。

结构如下：

<li><a href="foo.html">Foo</a></li>

当我的“page”变量等于“foo.html”时，我想将 li 的类更改为活动。如下：

<li class="active"><a href="foo.html">Foo</a></li>

我知道有一种比较简单的方法，但我这样做的方式似乎完全错误！

作为旁注，值得记住（因为这是我摔倒的地方）这是一个菜单，并且有许多 LI，例如：

<li class="active"><a href="foo.html">Foo</a></li>
<li><a href="bar.html">Bar</a></li>

非常感谢，克里斯

【问题讨论】：

你能用你拥有的代码更新吗？与我们中的一个人仅发布解决方案相比，这对您更有益。

标签： jquery class html-lists toggle href

【解决方案1】：

这应该可行：

$('a[href="foo.html"]').closest("li").addClass("active");

使用您的页面变量：

$('a[href="' + hrefVariable + '"]').closest("li").addClass("active");

编辑：

解释这是如何工作的：

第一部分 $('a[href="foo.html"]') 将定位页面上 href 值为 foo.html 的所有链接。
第二个对象 .closest("li") 将定位距第一部分中找到的元素最近的 li。
第三个对象将类添加到前面的元素，在本例中为 li。

【讨论】：

效果很好，谢谢 :) 使用“foo.html”所在的变量的正确方法是什么，我尝试将它连接起来，但它抛出了。

【解决方案2】：

第 1 步：获取正确的链接元素

首先您需要找到正确的a 标签元素，您可以使用以下attribute selector：

var href = "foo.html";
var a = $("[href='" + href + "']");

第 2 步：获取父列表项元素

然后您可以使用parent() 函数找到直接父级：

var li = a.parent();

如果它不是直接父级，您可以使用closest() 函数，该函数将允许您找到与提供的选择器匹配的第一个祖先。例如：

var li = a.closest("li");

第 3 步：更改班级

最后，您可以使用addClass() 函数将类添加到任何给定元素：

li.addClass("active");

如果您需要随时删除类，或删除现有类，可以使用removeClass() 函数：

li.removeClass("active");

注意：如果您想“重置”所有活动列表元素，您可以轻松地执行以下操作：

$("li.active").removeClass("active");

最终结果

Here is a working example in action

【讨论】：

【解决方案3】：

虽然您没有在问题中指定它，但我假设您想从其他 LI 中删除活动类？

var li = $('.menuClass li'), // menuClass is whatever the class of your menu is (or #menuId for id)
    page = 'foo.html';

li.each(function () {
    var t = $(this); // better performance
    t.removeClass('active'); // remove active class from all
    if (t.find('a').attr('href') === page) { // if the href equals the value of your page variable, add active class
        t.addClass('active');
    }
});

【讨论】：