如何从点击触发的option对象获取.cat_desc_hidden元素的id属性

核心问题 #

点击option元素触发事件时，当前代码无法正确定位到.cat_desc_hidden元素——$(this).closest('div')仅能找到option最近的父级div，而目标元素大概率不在这个层级范围内。

调整后的代码方案 #

方案一：分步定位容器 #

// 从option出发，先找到所在的select，再向上定位到product-list-right容器
var div_id = $(this).closest('select').closest('.product-list-right').find('.cat_desc_hidden').attr('id');
console.log(div_id);

方案二：直接匹配父级容器（更简洁） #

// 用parents方法直接匹配包含目标元素的product-list-right容器
var div_id = $(this).parents('.product-list-right').find('.cat_desc_hidden').attr('id');
console.log(div_id);

调试验证技巧 #

可以通过打印中间节点，确认每一步定位是否正确：

// 确认是否找到product-list-right容器
console.log($(this).parents('.product-list-right'));
// 确认是否找到.cat_desc_hidden元素
console.log($(this).parents('.product-list-right').find('.cat_desc_hidden'));

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