Can jquery get the previous element?-Front-end Q&A-php.cn

Can jquery get the previous element?

青灯夜游

Release： 2022-09-13 17:30:40

Original

3538 people have browsed it

jquery can get the upper level element. Obtaining steps: 1. Use the jQuery selector to select the specified element. The syntax "$("selector")" will return a jQuery object containing the specified element; 2. Use the parent() function to obtain the direct parent element of the specified element ( Previous element), the syntax is "specified object.parent(filter)", and the parameter "filter" is used to narrow the search scope.

Can jquery get the previous element?

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

Getting the upper level element is to get the parent element. In jquery, you can use the parent() function to get the parent element.

Implementation steps

Step 1: Use the jQuery selector to select the specified element

1) The jQuery element selector is based on the element The name of the selected element.

$("标签名")

Copy after login

2) The jQuery id selector selects elements based on the id attribute.

$("#id属性值")
<form id="属性值">
//表单元素
</form>

Copy after login

will return a jQuery object containing the specified element.

Step 2: Use the parent() function to obtain the parent element of the specified element

parent() returns the direct parent element of the selected element. This method only traverses a single level up the DOM tree.

指定对象.parent(filter)

Copy after login

Parameter	Description
filter	Can select. Specifies a selector expression that narrows the search for parent elements.

Example 1: Return the upper-level element of the element

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				 $("span").parent("li").css({"color":"red","border":"2px solid red"});
			});
		</script>
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>

	<body class="ancestors">body (曾曾祖父节点)
		<div style="width:500px;">div (曾祖父节点)
			<ul>ul (祖父节点)
				<li>li (直接父节点，上一级元素)
					<span>span</span>
				</li>
				<li>li (直接父节点，上一级元素)
					<span>span</span>
				</li>
			</ul>
		</div>
	</body>

</html>

Copy after login

Can jquery get the previous element?

Example 2: Use the filter parameter to narrow the search scope

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("span").parent("li.1").css({"color":"red","border":"2px solid red"});
			});
		</script>
		<style>
			.ancestors * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
	</head>

	<body class="ancestors">body (曾曾祖父节点)
		<div style="width:500px;">div (曾祖父节点)
			<ul>ul (祖父节点)  
				<li class="1">li (直接父节点)
					<span>span</span>
				</li>
				<li class="2">li (直接父节点)
					<span>span</span>
				</li>
			</ul>   
		</div>
	</body>
	
	</html>

Copy after login

Can jquery get the previous element?

[Recommended learning: jQuery video tutorial, web Front-end video】

The above is the detailed content of Can jquery get the previous element?. For more information, please follow other related articles on the PHP Chinese website!