jQuery - 用closest找父节点

  • 作者:KK

  • 发表日期:2016.11.26


要点速读

parent方法只是获取上一级,如果更新页面时在当前dom与父级dom之间插入多了一个标签,然后又忘了改js代码的话,那js代码获取到的parent就不是原来的parent了。但使用closest方法可以无视中间有多少插入的新DOM,直到找到符合选择器的父节点为止,这样对页面的兼容能力更优秀


很多程序员在获取父节点时都会使用parent方法,可是我认为closest会更加合适

parent和closest的区别

可能有的人少接触所以不一定知道我在讲哪个,其实就是$('xxx').parent()$('xxx').closest()这些DOM对象筛选方法

parent方法只是获取上一级的父节点

closest会一直往上找呀找,找到了才停下来


用closest会比较能兼容前端更新变化,我推荐

有时候会因为页面结构更新,比如本身是div a的,但后来中间增加了一层p标签就变成了div p a这样的结构

那如果原来有代码针对a标签执行parent的话就会得到父级div,但由于结构更新多了个p在中间,于是得到的parent就是p而不是div了,其中通常都因为这个意外会导致程序对DOM的处理不正确,页面出BUG

这个坑要么是你自己埋下的,要么是前任工程师埋下的

我入行IT一年多的时候就给自己埋过了这样的坑,当时很快意识到了问题

经过抽空复习jQuery,发现closest这个API可以找到匹配的父级为止,所以我就将$('#a标签的选择器').parent()给改成了$('#a标签的选择器').closest('指定父级div的选择器')