.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>

 

posted @ 2017-05-19 13:47  念念念不忘  阅读(877)  评论(0)    收藏  举报