如何在 jquery 中重写字符串以避免再次访问 dom，并使用 jquery 选择器

Question

我正在尝试重新编写一些 jquery 以便使用我之前创建的选择器，以便它不需要再次访问 DOM。 我创建的选择器已经访问过一次 DOM，我想在 function 的字符串文字中使用它的内容。

我当前的代码如下：

$(this.$content[$(`.nav a[href$="${window.location.hash}"]`).parent().index()]).show();

这工作得很好，但是“.nav a”正在访问 DOM，在这种情况下我不想要它。 我想使用 this.$navigation，它是我之前创建的并且已经拥有来自 DOM 的信息。 我试着把它写成

$(this.$content[$(`this.$navigation.find('a')[href$="${window.location.hash}"]`).parent().index()]).show();

其中 this.navigation = $("#main-nav")，是 .nav 元素的父级，但它不能以这种方式工作。

关于我如何处理这个问题的任何建议？

Answer 1

内部 jQuery object 应该移到字符串文字之外，并且属性选择器需要放在find()调用中。

$(this.$content[$(this.$navigation).find(`a[href$="${window.location.hash}"]`).parent().index()]).show();

此外，我会从命名约定中假设$navigation已经包含 jQuery object 因此不需要再次包装。 因此，这应该有效：

$(this.$content[this.$navigation.find(`a[href$="${window.location.hash}"]`).parent().index()]).show();