使用 jQuery 向上遍历

字数321 大约花费1分钟

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

1
2
3
4
5
6
7
<div id="parent2">
<div id="parent1">
<div id="parent0">
<div id="start"></div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 以下四句都打印 "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 的文章均为原创或翻译(翻译会注明外文来源),转载请以链接形式标明本文地址: http://tantanit.com/shi-yong-jquery-xiang-shang-bian-li/

谈谈IT

欢迎关注官方微信公众号获取最新原创文章