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

Posted 2023-05-09

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

【英文标题】：how to re-write string in jquery to avoid accessing the dom again, and use jquery selector

【发布时间】：2021-05-16 15:18:33

【问题描述】：

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

我当前的代码如下：

$(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 元素的父级，但不能以这种方式工作。

对我如何处理这个问题有什么建议吗？

【参考方案1】：

内部 jQuery 对象应该移到字符串字面量之外，属性选择器需要放在 find() 调用中。

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

此外，我会根据命名约定假设 $navigation 已经拥有一个 jQuery 对象，因此不需要再次包装。因此，这应该有效：

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