jquery parent

📌 相关文章

📜 jquery parent - Javascript (1)

📅 最后修改于: 2023-12-03 15:32:09.585000 🧑 作者: Mango

jQuery Parent is a method used in jQuery to get the parent element(s) of a selected item.

Syntax

$(selector).parent(filter);

selector: Required. The selected item(s) whose parent element(s) will be returned.
filter: Optional. A selector function to filter the parent element(s) based on certain criteria.

The parent() Method

The parent() method in jQuery returns the direct parent element of the selected item. This method only returns one element. If the selected item has multiple parent elements, only the direct parent element will be returned.

Example

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Parent Example</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function(){
			$("span").click(function(){
				$(this).parent().css("background-color", "yellow");
			});
		});
	</script>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: green;
			padding: 20px;
		}
		span {
			width: 100px;
			height: 100px;
			background-color: blue;
			color: white;
			padding: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div>
		<span>Click me</span>
	</div>
</body>
</html>

In this example, clicking on the blue span element will change the background color of its direct parent div element to yellow.

The parents() Method

The parents() method in jQuery returns all the parent elements of the selected item. This method returns an array of elements, with the first element being the direct parent and subsequent elements being the ancestors of the selected item.

Example

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Parents Example</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function(){
			$("span").click(function(){
				$(this).parents().css("background-color", "yellow");
			});
		});
	</script>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: green;
			padding: 20px;
		}
		span {
			width: 100px;
			height: 100px;
			background-color: blue;
			color: white;
			padding: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<span>Click me</span>
		</div>
	</div>
</body>
</html>

In this example, clicking on the blue span element will change the background color of all its parent div elements to yellow.

The parentUntil() Method

The parentUntil() method in jQuery returns all the parent elements of the selected item until a specified element is reached. This method returns an array of elements, with the first element being the direct parent and subsequent elements being the ancestors of the selected item.

Example

<!DOCTYPE html>
<html>
<head>
	<title>jQuery parentUntil Example</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function(){
			$("span").click(function(){
				$(this).parentUntil("div").css("background-color", "yellow");
			});
		});
	</script>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: green;
			padding: 20px;
		}
		span {
			width: 100px;
			height: 100px;
			background-color: blue;
			color: white;
			padding: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<span>Click me</span>
		</div>
	</div>
</body>
</html>

In this example, clicking on the blue span element will change the background color of all its parent elements up until the div element is reached to yellow.