jQuery 父元素选择器 parent() 和 parents()

布满荆棘的人生 2021-11-23 15:34 537阅读 0赞

> jQuery 的父元素选择器小编很少使用，但却看到不少 web开发者们经常使用。
> 
> 小编个人是不太推荐使用父元素选择器的。因为如果是列表的情况下，在循环时可以将当前的索引绑定给需要点击的按钮，通过 索引 查找元素。

本篇文章在小编不推荐的情况下，还是决定写一篇。

先来一段 HTML 结构代码

<table class="table table-bordered" id="user-table">
        <thead>
            <tr>
                <th>姓名</th>
                <th>职业</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>河浪</td>
                <td>web前端</td>
                <td>
                    <button class="btn btn-default btn-xs on-delete">删除</button>
                </td>
            </tr>
            
        </tbody>
    </table>

效果预览

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

### 设需求：点击 “删除”按钮，删除表格中相对应的行 ###

万事具备，该是上代码的时候了。

## \#1 父元素选择器 ##

*  方法名：parent( selector )
 *  功能描述：取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器。
 *  注意事项：只是进行单级的DOM树查找（也就是只查找一层，直接的父元素）。所以小编感觉这个方法提供一个选择器没什么鸟用啊。

通过上述对 父元素选择器 的描述后，根据需求写出如下代码

$("#user-table").on("click",".on-delete",function () {
        $(this).parent().parent().remove();
    })

parent() 每次只向上查找一层，所以需要查找两次才能匹配到 <tr> 元素

非常 “完美”的实现了需求，小编见过许多开发者都这么写。。。因为他们都不知道还存在另一个更科学的方法

## \#2 祖先元素选择器 ##

*  方法名：parents( selector )
 *  功能描述：获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数。
 *  注意事项：返回的元素顺序是从离它最近的父级元素开始的（从里到外的顺序），是所有匹配的父元素，而不是只返回离它最近的匹配的父元素（给所需要匹配的父元素添加唯一的匹配标识）。

下面，使用祖先元素选择器重写上面的功能

$("#user-table").on("click",".on-delete",function () {
        $(this).parents("tr").remove();
    })

因为在当前的HTML结构中，父元素 <tr> 已经是唯一标识，所以未添加 class 或其它可标识的属性

又是一波骚操作，功能顺利完成。小编为什么会说这种方法想较于上一种更加科学呢？  
理由有以下几点：

1.  代码更加简洁
2.  代码健壮性(容错)更好，如果是第一种方式，增加或删除一级布局结构代码都会导致功能出现错误。

正在阅读本篇文章的你，是不是也只用过 parent() 而没用过 parents() 呢？

从现在开始，多多使用 parents() 吧，它会让你的代码更优秀！

在本篇文章中，小编使用了 on() 这个jQuery 中处理事件的王者方法，有兴趣的读者可以阅读小编的原创文章[《jQuery 事件处理 on()》][jQuery _ on]，有详细的，科学的使用方式介绍。  
文章链接：[https://blog.csdn.net/u013350495/article/details/82533066][jQuery _ on]

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20211122/822095a6db9f44cba7d79eea09750f75.png
[jQuery _ on]: https://blog.csdn.net/u013350495/article/details/82533066
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211122/52464997b6ce4c4e97f72becc78fbe12.png