极客教程JQuery 获取一个元素的第n层父级
给定DOM中的一个元素，任务是使用JQuery找到该元素的第n级父元素。下面将讨论一些方法。
jQuery on()方法
这个方法为选定的元素和子元素添加一个或多个事件处理程序。
语法:
$(selector).on(event, childSel, data, fun, map)
参数:
- event。这个参数是必需的。它指定了一个或多个事件或命名空间，以添加到选定的元素。
如果有多个事件值，用空格分隔。事件必须是一个有效的。 -
childSel。这个参数是可选的。它指定了事件处理程序应该只附加到定义的子元素。
- data。这个参数是可选的。它指定了要传递给函数的额外数据。
- fun。这个参数是必需的。它指定了事件发生时要运行的函数。
- map。它指定了一个事件地图（{event:func(), event:func(), …}），有一个或多个事件添加到选定的元素，以及事件发生时运行的函数。
jQuery parents()方法
这是一个jQuery的内置方法，用于寻找与所选元素相关的所有父元素。这个方法遍历了所选元素的所有层次，并返回所有元素。
语法:
$(selector).parents()
返回值:
它返回所选元素的所有父元素。
jQuery eq()方法
该方法返回一个具有传递索引号的匹配元素。
该指数从0开始。
语法:
$(selector).eq(index)
参数:
- index。这个参数是必需的。它指定了元素的索引。接受正数或负数。
例1：本例使用parents()和eq()方法找到class=’child’元素的第0级父元素，它是一个<div>要素。
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Get the n-th level parent of an element.
</title>
</head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 17px; font-weight: bold;">
</p>
<div class="parent">
<div class="child">
child
</div>
</div>
<br>
<button>
click here
</button>
<p id="GFG_DOWN"
style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
('#GFG_UP').text('Click on the button to see result');
('button').on('click', function() {
('.child').parents().eq(0).css({
"color": "green",
"border": "2px solid green"
});
('#GFG_DOWN').text(
"Border drawn around the first parent "+
"of element with class = 'child'");
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
例子2：这个例子使用parents()和eq()方法找到class='child'元素的第二层父级，该元素是一个<body>元素。
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery| Get the n-th level parent of an element.
</title>
</head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 17px; font-weight: bold;">
</p>
<div class="parent">
<div class="child">
child
</div>
</div>
<br>
<button>
click here
</button>
<p id="GFG_DOWN"
style="color: green;
font-size: 24px;
font-weight: bold;">
</p>
<script>
('#GFG_UP').text('Click on the button to see result');
('button').on('click', function() {
('.child').parents().eq(2).css({
"border": "2px solid green"
});
('#GFG_DOWN').text(
"Border drawn around the third parent "+
"of element with class = 'child'");
});
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
