如何获得jQuery中元素的第一个祖先
时间：2020-02-23 14:45:59 来源:igfitidea点击:
在本文中，我们将讨论用于获得所选HTML元素的第一个祖先的遍历方法。
jQuery API提供了" closest()"方法来执行此任务。
jQuery closest()
jQuery closest()方法返回所选HTML元素的第一个匹配的祖先元素。
该方法接受一个强制性参数，该参数会过滤掉遍历。
此方法首先通过查看当前元素开始遍历，如果它与指定的表达式匹配，它将返回当前元素，否则它将遍历DOM树直到找到与过滤器匹配的元素。
如果搜索未找到任何匹配的元素，则此方法将不返回任何内容。
这是使用最近的()方法的常规语法：
- selector.closest(filter)
- selector.closest(filter，context)
filter是传递给此方法的必需参数，可过滤出祖先搜索。
context是一个可选参数，它是一个DOM元素。
在此上下文中可以找到匹配的元素。
jQuery closest()函数示例
以下示例演示了jQuery closet()方法的用法。
<!doctype html>
<html>
<head>
<title>jQuery Traversing closest</title>
<style>
div,span{
display: block;
border: 3px solid lightgrey;
color: black;
padding: 5px;
margin: 25px;
width:300px;
}
span.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<div>
Click me!
Click me!
You can also Click me!
</div>
<script>
$( document ).on( "click", function( event ) {
$( event.target ).closest( "span" ).toggleClass( "highlight" );
});
</script>
</body>
</html>
在此示例中，div元素中有三个span元素。
单击span元素时，最接近的()方法触发。
此处通过的过滤器为" span"，它将首先检查当前元素是否为span。
由于单击span元素，因此该方法将返回该元素，并执行所需的操作。
其中我们使用jQuery toggleClass在CSS样式类之间切换以更改背景颜色。
