使用jQuery获取嵌套子元素时如何简化冗长的链式选择代码？

可选的简洁实现方案 #

方案1：依赖id直接选择（性能最高） #

如果目标元素的id="text-on-image"是全局唯一的，直接用id选择器即可：

$('#text-on-image')

方案2：限定在当前根元素范围内按id查找（避免同id冲突） #

如果页面存在多个同结构模块、id可能重复，限定在当前lv1根元素下查找：

$(this).eq(0).find('#text-on-image')

方案3：不依赖id、按层级位置匹配（和原逻辑完全等价） #

如果不想依赖id属性，要严格按原有的「第一个lv2子元素下的第二个子div」的逻辑匹配，可以直接在find中传入层级选择器：

// 和原代码逻辑100%一致，写法更简洁
$(this).eq(0).find('.lv2:eq(0) > :eq(1)')

也可以拆写成更易读的版本：

$(this).eq(0).children('.lv2').eq(0).children().eq(1)

原理解释 #

jQuery内置的选择器引擎支持标准CSS选择器语法和扩展伪类，不需要手动逐层调用children()、eq()方法嵌套，直接传入组合选择器即可完成层级过滤，代码更简洁易读。

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