jquery 父节点

jQuery 父节点选择方法

获取直接父节点

使用 parent() 方法选择当前元素的直接父节点：

$('#childElement').parent();  

这会返回 #childElement 的上一级 DOM 元素。

获取所有祖先节点

使用 parents() 方法选择当前元素的所有祖先节点（包括父节点、祖父节点等）：

$('#childElement').parents();  

可以通过传入选择器进一步筛选特定祖先节点：

$('#childElement').parents('.grandparentClass');  

获取特定层级的父节点

使用 closest() 方法查找最近的匹配祖先节点（从当前元素开始向上匹配）：

$('#childElement').closest('.container');  

该方法会返回第一个匹配的祖先节点，若未找到则返回空对象。

筛选父节点

结合 filter() 方法对父节点进行条件筛选：

$('#childElement').parent().filter('.active');  

仅返回符合 .active 类的直接父节点。

注意事项

• parent() 和 parents() 返回的是 jQuery 对象，可通过 .get(0) 转换为原生 DOM 元素。
• closest() 包含当前元素自身，若需严格父节点需确保选择器不匹配自身。

示例：通过父节点修改样式

$('#childElement').parent().css('background-color', 'red');