如何获取<input id="date-field">选择器外部的tab-list类元素？

嘿，我帮你梳理了几种靠谱的方法，结合你给出的DOM结构来实现需求，具体如下：

首先先明确下咱们的DOM结构（简化后）：

<div id="tabs-normal" class="tab-container"> 
  <ul class="tab-list"> <!-- 我们要找的目标元素 -->
    <li class="tab"><a href="#tabs-normal-notes">Notes</a></li> 
  </ul> 
  <div id="tabs-normal-notes" class="tab-panel"> 
    <!-- 省略中间层级 -->
    <input id="date-field"> <!-- 当前操作的元素 -->
  </div>
</div>

原生JavaScript方案 #

方法1：精准定位当前元素所在的tab容器内的.tab-list

这个方法是最稳妥的，因为它只找当前元素所属tab容器里的目标元素，不会误抓页面其他地方的.tab-list：

// 获取当前元素
const dateField = document.getElementById('date-field');
// 向上遍历DOM树，找到最近的.tab-container父容器
const tabContainer = dateField.closest('.tab-container');
// 在容器内查找.tab-list（完全避开了date-field的范围）
const targetTabList = tabContainer.querySelector('.tab-list');

方法2：全局筛选排除当前元素范围内的.tab-list

如果页面上有多个.tab-list，且你需要获取所有不在date-field范围内的，可以用这个过滤思路：

const dateField = document.getElementById('date-field');
// 获取页面上所有.tab-list元素
const allTabLists = document.querySelectorAll('.tab-list');
// 过滤掉被date-field包含的.tab-list（也就是在它范围内的）
const targetTabLists = Array.from(allTabLists).filter(list => !dateField.contains(list));

jQuery方案（如果项目用了jQuery） #

同样可以用向上遍历的思路，代码更简洁：

const $dateField = $('#date-field');
// 找到父级.tab-container，再查找内部的.tab-list
const $targetTabList = $dateField.closest('.tab-container').find('.tab-list');

如果要全局排除的话：

const $dateField = $('#date-field');
// 获取所有.tab-list，排除掉date-field内部的
const $targetTabLists = $('.tab-list').not($dateField.find('.tab-list'));

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