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

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

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变量有什么想法吗

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

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

---

此处

menuBar.children（）

将是上下文。

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

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

---

此处

menuBar.children（）

将是上下文。

您可能正在查找：

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

或者实际上，因为您正在尝试选择父对象：

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

---

：has

伪类允许您选择包含另一个元素的元素。这才是您真正想要的，您应该允许选择器本身进行任何优化。

您可能正在寻找：

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

或者实际上，因为您正在尝试选择父对象：

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

---

：has

伪类允许您选择包含另一个元素的元素。这才是您真正想要的，您应该允许选择器本身进行它所能进行的任何优化。

尝试类似的方法

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

---

试试这样的

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

---

所以你不想调用

.parent（）

？所以你不想调用

.parent（）

？我真的很喜欢has方法！谢谢Nathan，不是find Though的粉丝，我真的很喜欢has方法！谢谢内森，不过他不是find的粉丝