.parent() / .parents() / .closest() ——获取父级元素 / 所有祖先节点 / 最近的符合条件的祖先节点
一、.parent() ——获取元素的父级元素
描述:获取元素的父级,不管父级元素是否有定位
写法:元素.parent()
$('#div2').parent().css('background','blue'); //div1变色
<div id="div1"> <div id="div2"></div> </div>
二、.parents()——获取元素的所有祖先节点
描述:获取元素的所有祖先节点,一直到<html>。也可以筛选符合条件的祖先节点
获取到的元素个数:多个
写法:元素.parents()
元素.parents(筛选参数,例如class)
$('#div2').parents().css('background','red'); //div1,body,html标签都是红色背景
$('#div2').parents('.box').css('background','red'); //只有祖先节点<body>才包含.box属性,所以背景才变色
<html> <body class="box"> <div id="div1">aaa <div id="div2">bbb</div> </div> </body> </html>
三、.closest()——获取最近的指定的祖先节点
描述:检查当前元素是否匹配,如果匹配则返回,不匹配向上逐级查找父级,知道找到匹配的元素,找到元素后停止查找。必须要写筛选的参数
获取到的元素个数:1个
写法:元素.closest(筛选参数,例如class)
$('#div2').closest('.box').css('background','red'); //div2也包含.box属性,所以获取最近的节点是div2,所以背景变色
<html> <body class="box"> <div id="div1">aaa <div id="div2" class="box">bbb</div> </div> </body> </html>