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

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");