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

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>

效果预览

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

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

#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()》，有详细的，科学的使用方式介绍。
文章链接：https://blog.csdn.net/u013350495/article/details/82533066

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号