jquery+获得父级元素

在前端开发中，经常需要通过jQuery获取某个元素的父级元素。jQuery提供了parent()、parents()、closest()三种方法来实现这个功能。下面分别介绍一下它们的用法和区别。

//parent()$(this).parent();
     //获取当前元素的直接父级元素//parents()$(this).parents();
     //获取当前元素的所有父级元素//closest()$(this).closest(selector);
 //获取匹配selector选择器的第一个祖先元素

使用这三个方法时需要注意的是，它们获取的父级元素是不一样的。

parent()方法只会获取当前元素的直接父级元素，如果要获取父级元素的父级元素，需要多次调用该方法。而parents()方法可以获取当前元素的所有父级元素，包括直接和非直接的，一直往上直到document。

closest()方法会在当前元素及其祖先元素中匹配选择器，返回匹配元素中离当前元素最近的一个，如果没有匹配到，则返回一个空的jQuery对象。

// 区别演示Hello World!$(function() {
    var child = $('.child');
    // parent()方法只会获取到父级元素console.log(child.parent('.father'));
     //console.log(child.parent('.grandfather'));
     // 空的jQuery对象// parents()方法可以获取到所有父级元素console.log(child.parents('.father'));
     //console.log(child.parents('.grandfather'));
     //// closest()方法会匹配祖先元素，并返回最近的一个console.log(child.closest('.father'));
     //console.log(child.closest('.grandfather'));
 //}
    )

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！