Question

我正在尝试使用之前定义的menuBar对象对其中的对象进行操作。

var menuBar = $(".menu-bar ul");
var menuActive = menuBar.find("li.active");
menuBar.hover(function(){
    menuActive.toggleClass("active");
});
$('.menu-bar ul > li > a[href="'+ window.location.href +'"]').parent().addClass("active");

我不喜欢再次调用DOM搜索来定义链接父级的活动类。

有关如何使用menuBar变量的任何想法？

Answer 1

你可能正在寻找：

menuBar.find('> li > a[href="'+ window.location.href +'"]').parent().addClass("active");

或者真的，因为你试图选择父母：

menuBar.find('> li:has(> a[href="'+ window.location.href +'"])').addClass("active");

:has伪类允许您选择包含其他元素的元素。这就是你想要的，你应该允许选择器本身做任何优化。

Answer 2

您可以指定要在其中搜索的上下文：

$('li > a[href="'+ window.location.href +'"]', menuBar.children()).parent().addClass("active");

这里menuBar.children()就是上下文。

Answer 3

尝试这样的事情

var menuBar = $(".menu-bar ul");
var menuActive = menuBar.find("li.active");
menuBar.hover(function(){
    menuActive.toggleClass("active");
});
$('li > a[href="'+ window.location.href +'"]',menuBar).parent().addClass("active");

重用变量而不是新的DOM搜索

3 个答案: