Home > Article > Web Front-end > Can jquery get the previous element?

Can jquery get the previous element?

青灯夜游Original: 2022-09-13 17:30:403490browse

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.

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.

$("标签名")

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

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

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)

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What does css default font-size mean?Next article：What does css default font-size mean?

See more

Can jquery get the previous element?

Related articles