如何使用 jQuery 获取包含与指定选择器匹配的最近父元素的元素?
操作 DOM 是 Web 开发的重要组成部分，jQuery 是一个流行的库，它可以轻松遍历 HTML DOM 树，并根据元素与其他元素的关系来选择或修改元素。在本篇博文中，我们将探讨如何使用 jQuery 根据与指定选择器匹配的最近父元素来获取或设置元素。
使用 Closest() 方法
jQuery 中的 closest() 方法用于获取第一个与指定选择器匹配的元素，方法是在 DOM 树中搜索元素本身及其祖先元素。以下示例演示了如何使用 closest() 方法−
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
</div>
</div>
<script>
$(document).ready(function() {
var closestAncestor = $('.myClass').closest('div');
console.log(closestAncestor);
});
</script>
</body>
</html>
在本例中，我们有一个 div 元素，其中包含一个 p 元素，以及另一个类名为"myClass"的 div 元素，而该 div 元素又包含另一个 p 元素。我们使用 closest() 方法获取该 div 元素(类名为"myClass")的最近祖先元素。closestAncestor 变量将包含所选的 div 元素。
使用 ParentsUntil() 方法
jQuery 中的 parentsUntil() 方法用于获取所选元素和与指定选择器匹配的元素之间的所有祖先元素。以下示例演示了如何使用 parentsUntil() 方法−
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
</div>
</div>
<script>
$(document).ready(function() {
var ancestorElements = $('.myClass').parentsUntil('div');
console.log(ancestorElements);
});
</script>
</body>
</html>
在此示例中，我们选择类名为"myClass"的元素，然后使用 parentsUntil() 方法获取该元素与第一个 div 元素之间的所有祖先元素。ancestorElements 变量将包含所有选定的祖先元素。
使用 Find() 方法
jQuery 中的 find() 方法用于选择所选元素的所有与指定选择器匹配的后代元素。以下示例演示了如何使用 find() 方法选择最近的父元素中的元素−
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
<span>Some more text</span>
</div>
</div>
<script>
$(document).ready(function() {
var descendants = $('.myClass').find('span');
console.log(descendants);
});
</script>
</body>
</html>
在本例中，我们选择类名为"myClass"的 div 元素，然后使用 find() 方法选择其中的所有 span 元素。descendants 变量将包含所有选定的后代元素。
使用 Children() 方法
jQuery 中的 children() 方法用于选择所选元素的所有与指定选择器匹配的直接子元素。以下示例演示了如何使用 children() 方法:−
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
<span>Some more text</span>
</div>
</div>
<script>
$(document).ready(function() {
var childrenElements = $('.myClass').children('p');
console.log(childrenElements);
});
</script>
</body>
</html>
在本例中，我们选择类名为"myClass"的 div 元素，然后使用 children() 方法选择其所有直接子元素 p 元素。childrenElements 变量将包含所有选定的子元素。
使用 Siblings() 方法
jQuery 中的 siblings() 方法用于选择所选元素中所有与指定选择器匹配的兄弟元素。以下示例演示了如何使用 siblings() 方法。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
</div>
<p>Even more text.</p>
</div>
<script>
$(document).ready(function() {
var siblingElements = $('.myClass').siblings('p');
console.log(siblingElements);
});
</script>
</body>
</html>
在本例中，我们选择类名为"myClass"的 div 元素，然后使用 siblings() 方法选择其所有同级 p 元素。siblingElements 变量将包含所有选定的同级元素。
使用 Prev() 和 Next() 方法
jQuery 中的 prev() 和 next() 方法用于选择与指定选择器匹配的所选元素的上一个和下一个同级元素。以下示例演示了如何使用 prev() 和 next() 方法 -
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>Some text.</p>
<div class="myClass">
<p>Some more text.</p>
</div>
<p>Even more text.</p>
</div>
<script>
$(document).ready(function() {
var prevElement = $('.myClass').prev('p');
var nextElement = $('.myClass').next('p');
console.log(prevElement);
console.log(nextElement);
});
</script>
</body>
</html>
在此示例中，我们选择类名为"myClass"的 div 元素，然后使用 prev() 方法选择上一个 p 元素，并使用 next() 方法选择下一个 p 元素。prevElement 和 nextElement 变量将包含所选元素。
使用 Index() 方法
index() 方法是另一个有用的 jQuery 方法，可用于根据元素与页面上其他元素的关系来选择元素。此方法返回所选元素在其兄弟元素中的索引位置。
请考虑以下 HTML 代码 -
<div> <p>First</p> <p>Second</p> <p class="selected">Third</p> <p>Fourth</p> <p>Fifth</p> </div>
要获取类名为"selected"的 p 元素的索引位置，我们可以使用以下代码 -
var selectedIndex = $('p.selected').index();
console.log(selectedIndex);
index() 方法返回从零开始的索引，因此在本例中，输出将为 2，因为类名为"selected"的 p 元素是其父 div 中的第三个 p 元素。
我们还可以使用 index() 方法根据索引位置选择特定的兄弟元素。例如，要选择 div 中的第二个 p 元素，我们可以使用以下代码:−
var secondElement = $('div p').eq(1);
console.log(secondElement);
eq() 方法用于根据索引位置选择特定元素。在本例中，我们将 1 作为参数传递给 eq() 以选择第二个 p 元素。
结合使用 index() 和 eq() 方法可以有效地选择和操作页面上的元素。
结论
在这篇博文中，我们探讨了如何使用 jQuery 获取和设置包含与指定选择器匹配的最近父元素的元素。我们讨论了如何使用 closest() 方法来选择最接近的匹配父元素，还探索了其他 jQuery 方法，这些方法可以根据元素与页面上其他元素的关系来选择元素。掌握这些技巧后，您将能够轻松地操作 DOM，并创建能够响应用户交互的动态网页。
