使用jQuery向上遍历

偏执的太偏执、 2023-07-05 13:25 2阅读 0赞

使用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】，第一时间获取最新文章。  
![欢迎关注同名公众号][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/1e8abcdc16fd4426bb4a9a2d27f75a1b.bmp?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6LCI6LCISVQ=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 遍历

什么是遍历？ jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素

桃扇骨/ 2024年03月16日 11:22/ 0 赞/ 100 阅读

相关使用jQuery向上遍历

使用parent()，parents()和closest()表示向上遍历，其中parent()返回直接父节点，最多一个，parents()返回所有的祖先节点，结果可以有多个，函

偏执的太偏执、/ 2023年07月05日 13:25/ 0 赞/ 3 阅读

相关 JS遍历与JQuery遍历

JS遍历语法： for(初始化值;循环结束条件;步长) html代码： <!DOCTYPE html> <html> <head>

电玩女神/ 2022年12月25日 15:59/ 0 赞/ 211 阅读

相关 jQuery 遍历

什么是遍历？ [jQuery][] 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期

朱雀/ 2022年10月01日 01:00/ 0 赞/ 220 阅读

相关 jQuery遍历

1.祖先 parent()方法：返回被选元素的直接父元素 $(document).ready(function(){ $("span").paren

爱被打了一巴掌/ 2022年09月21日 11:49/ 0 赞/ 210 阅读

相关 jquery each 遍历

在jquery中，遍历对象和数组经常会用each $.each("input"\],function(i,n) \{ alert("索引:"+i+"

Myth丶恋晨/ 2022年06月16日 08:40/ 0 赞/ 252 阅读

相关 jQuery 遍历

一、jQuery 遍历 - 祖先 1.向上遍历 DOM 树这些 jQuery 方法很有用，它们用于向上遍历 DOM 树： [parent()][paren

港控/mmm°/ 2022年05月30日 05:37/ 0 赞/ 221 阅读

相关 jQuery 数据遍历

本篇文章说一下jQuery中一个非常棒的方法，$.each(object,callback) ，这个方法用来遍历数据，可以遍历数组及对象，下面的示例将说明一下该方法的基本用法。

￡神魔★判官ぃ/ 2022年05月14日 13:28/ 0 赞/ 244 阅读

相关 jQuery遍历

文章目录 jQuery遍历向上遍历向下遍历同级遍历过滤

拼搏现实的明天。/ 2022年01月24日 00:21/ 0 赞/ 320 阅读

相关 jQuery对DOM元素的向上、向下、同级遍历和过滤

jQuery的向下遍历例子： <script src="../JS/Extend.js"></script> <script src="../JS/

╰+哭是因爲堅強的太久メ/ 2021年09月13日 23:16/ 0 赞/ 302 阅读