博客

要获取一个元素的第n层父级，可以使用JQuery的父级选择器parent()和eq()。下面是完整的攻略：

1. 首先，用JQuery获取该元素本身：

var $el = $('#target');

1. 然后，使用parent()和eq()依次获取其第n层父级，例如要获取其第3层父级：

var $parent = $el.parent().eq(2);

这里parent()获取到所有祖父元素，eq(2)则选择第3个祖父元素。

1. 最后，可以对获取到的父级元素进行操作，比如修改其样式：

$parent.css('background-color', 'red');

示例1：获取一个元素的第2层父级，并将其文本内容修改为”hello world”：

<div class="level1">
  <div class="level2">
    <div id="target">要获取的元素</div>
  </div>
</div>

var $el = $('#target');
var $parent = $el.parent().eq(0);
$parent.text('hello world');

这里eq(0)选择了第1个祖父元素，即class为”level2″的div元素。

示例2：获取一个元素的第4层父级，并在控制台输出祖先元素的个数：

<div class="level1">
  <div class="level2">
    <div class="level3">
      <div class="level4">
        <div id="target">要获取的元素</div>
      </div>
    </div>
  </div>
</div>

var $el = $('#target');
var $parent = $el.parent().eq(2);
console.log('祖先元素的个数：' + $parent.parents().length);

这里eq(2)选择了第3个祖先元素，即class为”level2″的div元素，然后用parents()获取所有祖先元素的个数，并在控制台输出。