jquery 查找祖先元素_如何获得jQuery中元素的第一个祖先

jquery 查找祖先元素

In this post, we will discuss about the traversal method to get the first ancestor of the selected HTML element. jQuery API provides closest() method to perform this task.

在本文中，我们将讨论有关遍历方法以获取所选HTML元素的第一个祖先的信息。 jQuery API提供了closest()方法来执行此任务。

jQuery最接近的（） (jQuery closest())

The jQuery closest() method returns the first matched ancestor element of the selected HTML element. The method accepts a mandatory parameter, which filters out the traversal. This method starts traversal by first looking at the current element, it will return the current element if it matches the specified expression else it will traverse up the DOM tree until it found an element which matches the filter. This method will not return anything if the search does not found any matching element.

jQuery最接近的（）方法返回所选HTML元素的第一个匹配的祖先元素。该方法接受一个强制性参数，该参数会过滤掉遍历。此方法首先通过查看当前元素开始遍历，如果它与指定的表达式匹配，它将返回当前元素，否则它将遍历DOM树直到找到与过滤器匹配的元素。如果搜索未找到任何匹配的元素，则此方法将不返回任何内容。

Here is the general syntax for using closest() method:

以下是使用最近的（）方法的常规语法：

selector.closest(filter)selector.closest（filter）
selector.closest(filter,context)selector.closest（filter，context）

filter is a mandatory parameter passed to this method which filter out the ancestor search.

filter是传递给此方法的必需参数，可过滤出祖先搜索。

context is an optional parameter, which is a DOM element. A matching element may be found within this context.

context是一个可选参数，它是一个DOM元素。在此上下文中可以找到匹配的元素。

jQuery最近的（）函数示例 (jQuery closest() function example)

Following example demonstrates the jQuery closet() method usage.

以下示例演示了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><span><b>Click me!</b></span><span><b>Click me!</b></span><span>You can also <b>Click me!</b></span>
</div>
<script>
$( document ).on( "click", function( event ) {
$( event.target ).closest( "span" ).toggleClass( "highlight" );
});
</script>
</body>
</html>

In this example, there are three span elements within the div element. The closest() method triggers when you click on the span elements. The filter passed here is “span” and it will first check the current element is a span. Since we click on the span element, the method will return that element and we carry out the desired actions. Here we use jQuery toggleClass to toggle between the CSS style class to change the background color.

在此示例中，div元素内有三个span元素。单击span元素时，最接近的（）方法触发。此处通过的过滤器为“ span”，它将首先检查当前元素是否为span。由于单击span元素，因此该方法将返回该元素，并执行所需的操作。在这里，我们使用jQuery toggleClass在CSS样式类之间切换以更改背景颜色。

This method will traverse up the DOM tree if the matching element is not found. You can try it out by clicking in any of the boxes below.

如果找不到匹配的元素，则此方法将遍历DOM树。您可以通过点击下面的任何框来尝试一下。

演示地址

That’s all for now. we will look into more jQuery traversing methods in coming posts.

目前为止就这样了。我们将在以后的文章中研究更多的jQuery遍历方法。

翻译自: https://www.journaldev.com/5321/get-first-ancestor-element-jquery

jquery 查找祖先元素