使用jQuery向上遍历

371 阅读1分钟

使用parent(),parents()和closest()表示向上遍历,其中parent()返回直接父节点,最多一个,parents()返回所有的祖先节点,结果可以有多个,函数可以加过滤条件。closest指包括自己和所有祖先节点中,满足条件的最近的节点,结果最多一个,该函数一般会加参数,不加参数时结果为自己。

<div id="parent2">
<div id="parent1">
<div id="parent0">
<div id="start"></div>
</div>
</div>
</div>
// 以下四句都打印 "parent0"
alert($('#start').parent().attr('id'));
alert($('#start').parents('#parent0').attr('id'));
alert($('#start').parents()[0].id);
alert($('#start').closest('#parent0').attr('id'));

// 以下四句都打印 "parent1"
alert($('#start').parent().parent().attr('id'));
alert($('#start').parents('#parent1').attr('id'));
alert($('#start').parents()[1].id);
alert($('#start').closest('#parent1').attr('id'));

// 以下四句都打印 "parent2"
alert($('#start').parent().parent().parent().attr('id'));
alert($('#start').parents('#parent2').attr('id'));
alert($('#start').parents()[2].id);
alert($('#start').closest('#parent2').attr('id'));

parent()的排列顺序是从子元素到父元素,这和其它的函数是不同的,其它的函数一般是按DOM顺序排列的。

欢迎搜索“谈谈IT”或扫描下方二维码关注微信公众号,第一时间获取最新文章(^_^)

谈谈IT