如何复用jQuery获取的DOM对象替代原生DOM查询，避免重复遍历

针对你问的「是否需要将该部分原生逻辑改写为jQuery代码」的问题，答案非常明确：

• 不需要逐行把原生JS查询逻辑翻译成jQuery代码保留，所有硬编码的原生DOM查询代码都应该直接移除，完全复用构造函数传入的$navigation、$content对象实现全部交互，这才是符合你降低DOM查询依赖、避免重复DOM操作目标的正确做法。

你当前代码里残留的原生JS查询#main-nav、取内部.nav节点的逻辑，本质上是在重复查询已经被传入构造函数的元素，属于完全冗余的操作：不仅额外消耗DOM查询性能，还因为类内部硬编码了#main-nav的选择器字符串，破坏了构造函数传jQuery对象做依赖注入的封装性，后续如果调整导航的选择器，需要同时改两处代码，很容易出现维护bug。

原来的原生逻辑实现的核心能力只有两个：给导航下的.nav节点绑定点击事件、点击时切换节点的active类，配合你已经写好的「点击导航切换对应内容显示」逻辑，全程不需要额外写新的DOM查询，实现步骤非常直接：

• 完全删掉所有写死的document.getElementById('main-nav')、document.querySelectorAll('.nav')这类原生查询代码。
• 原来要在#main-nav内部找所有.nav节点的需求，直接基于已经缓存好的$navigation（也就是实例化时传入的$('#main-nav')对象）做内部元素筛选：$navigation.find('.nav')。这步操作完全不会触发新的DOM查询，只是在已绑定的DOM元素集合内部做类名匹配筛选，和你写原生JS从拿到的#main-nav节点上找子节点的效果完全一致。
• 把原来通过classList实现的active类切换逻辑，换成jQuery内置方法实现。如果你的导航项是动态渲染的，推荐基于$navigation做事件委托，避免后续新增导航节点的时候重复绑事件：

// 基于已缓存的$navigation绑定事件，无额外DOM查询
$navigation.on('click', '.nav', function (e) {
    const $currentNav = $(e.currentTarget);
    // 切换active类：当前点击项加类，同级其他导航项移除active
    $currentNav.addClass('active').siblings('.nav').removeClass('active');
    // 直接复用你已有的、基于$content的内容切换逻辑，不需要重新查询内容容器
    const targetId = $currentNav.data('target');
    $content.find(`.faq-panel[data-id="${targetId}"]`).show().siblings('.faq-panel').hide();
})

• 如果你的导航项是静态固定写死的，也可以直接把事件绑在$navigation.find('.nav')返回的节点集合上，效果完全一致，全程类内部不会出现任何硬编码的选择器查询。

• 替换过程中绝对不要在类内部重新写$('#main-nav')、$('.faq-container')这类全局选择器查询，不然就完全失去了把jQuery对象通过构造函数传入做依赖注入的意义。
• 所有涉及子元素查找的操作，都要基于传入的$navigation、$content调用find()方法完成，不要绕开已传入的对象重新发起DOM查询。

内容的提问来源于stack exchange，提问作者Joao