.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)    收藏  举报