jQuery | 获取元素的第 n 层父级

在 jQuery 中，我们可以使用 parent() 方法获取元素的直接父级元素，但是如果我们需要获取元素的第 n 层父级元素，该怎么办呢？本文将介绍如何使用 jQuery 实现这个功能。

方法一

我们可以使用 parent() 方法结合一个 for 循环来获取元素的第 n 层父级元素。代码示例如下：

var $element = $("selector");
var n = 2; // 获取元素的第 2 层父级
for (var i = 0; i < n; i++) {
  $element = $element.parent();
}

解析：

• 首先使用 $() 函数获取需要操作的元素；
• 然后定义变量 n 表示要获取的父级层数；
• 接着使用 for 循环，每次循环都执行一次 parent() 方法，将结果保存在 $element 变量中，直到获取到第 n 层父级元素为止。

方法二

除了使用 parent() 方法结合 for 循环来获取元素的第 n 层父级元素之外，我们还可以使用递归来实现。递归是指一个函数在执行过程中调用自身的过程，可以方便地实现深层次的操作。代码示例如下：

function getNthParent($element, n) {
  if (n === 0) {
    return $element;
  } else {
    return getNthParent($element.parent(), n-1);
  }
}

// 调用函数
var $element = $("selector");
var n = 2; // 获取元素的第 2 层父级
var $nthParent = getNthParent($element, n);

解析：

• 首先定义一个名为 getNthParent() 的函数，该函数接收两个参数：要获取父级的元素和要获取的父级层数；
• 在函数内部，如果传入的层数为 0，则返回当前元素本身，否则递归调用 getNthParent() 函数，每次递归将要获取父级层数减 1，直到获取到第 n 层父级元素为止；
• 调用函数时，我们传入要操作的元素 $element 和要获取的父级层数 n，函数将返回第 n 层父级元素。

总结

本文介绍了两种使用 jQuery 获取元素的第 n 层父级元素的方法：使用 parent() 方法结合 for 循环和使用递归。两种方法都可以实现这个功能，具体使用哪种方法取决于实际情况。