jQuery技术问询：如何从输入框选中其祖先.control-group下的label元素

当然可以！你可以通过jQuery的DOM遍历方法轻松实现这个需求，下面是具体的实现思路和代码示例：

核心思路 #

从目标<input>元素出发，先向上定位到它的父容器.control-group，再在这个容器内部筛选出显示“Description/Pack Size”的<label>元素——也就是带有.control-label-sub类的那个标签。

具体代码实现 #

// 第一步：选中目标input文本框（用ID选择器最精准）
const packetInput = $('#packetSize');

// 第二步：向上找到最近的.control-group父元素，再从中筛选目标label
const targetLabel = packetInput.closest('.control-group').find('label.control-label-sub');

// 如果需要获取标签的文本内容，可以这样做
const labelContent = targetLabel.text().trim();
console.log(labelContent); // 会输出 "Description/Pack Size"

代码解释 #

• $('#packetSize')：通过input的ID精准选中元素，避免页面中其他类似input干扰。
• .closest('.control-group')：向上遍历DOM树，找到最近的带有.control-group类的父元素，这种方式比多次调用.parent()更灵活，哪怕后续DOM结构有小调整也能正常工作。
• .find('label.control-label-sub')：在.control-group容器内部，筛选出带有.control-label-sub类的label，确保不会误选后面的错误提示label（<label id="packetSize-error">）。

另一种可选写法 #

如果你更习惯通过同级元素定位，也可以这样写：

const targetLabel = $('#packetSize').parent('.controls').siblings('label.control-label-sub');

不过这种写法依赖于.controls和目标label是同级元素的结构，不如closest的方式稳健。

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