如何使用jQuery获取select元素后方多层span嵌套的ul元素

jQuery实现方案 #

你可以从目标select元素出发，先匹配紧邻其后的兄弟节点，再深度查找嵌套的ul元素即可，以下是几种适配不同场景的写法：

• 写法1（兼容性最强，适配你给出的DOM结构，不限制span的嵌套层级）：

// 以id为my-select的select元素为起点查找
const $targetUl = $('#my-select').next().find('ul.my-list');
// 如果需要更精准匹配第一层span的类名，也可以写成
const $targetUl = $('#my-select').next('.first-span').find('ul.my-list');

• 写法2（可以直接写在单条选择器内，代码更精简）：

const $targetUl = $('#my-select + * ul.my-list');

• 写法3（如果需要严格匹配多层span的结构，避免匹配到其他后代ul，可以指定层级查找）：

const $targetUl = $('#my-select').next('span.first-span')
                                 .children('span.second-span')
                                 .children('span.third-span')
                                 .children('ul.my-list');

核心方法说明 #

• .next() 方法用于获取当前元素紧邻的下一个兄弟元素，刚好匹配和select同级的第一个span元素
• .find() 方法会在当前元素的所有后代节点里查找匹配元素，不受嵌套层级限制，完美适配多层span包裹的场景

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