Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bolehkah jquery mendapatkan elemen sebelumnya?

Bolehkah jquery mendapatkan elemen sebelumnya?

青灯夜游
Lepaskan: 2022-09-13 17:30:40
asal
3537 orang telah melayarinya

jquery boleh mendapatkan elemen peringkat atas. Mendapatkan langkah: 1. Gunakan pemilih jQuery untuk memilih elemen yang ditentukan Sintaks "$("pemilih")" akan mengembalikan objek jQuery yang mengandungi elemen yang ditentukan 2. Gunakan fungsi induk() untuk mendapatkan elemen induk langsung elemen yang ditentukan ( Elemen sebelumnya), sintaksnya ialah "objek.ibu bapa(penapis)", dan parameter "penapis" digunakan untuk mengecilkan skop carian.

Bolehkah jquery mendapatkan elemen sebelumnya?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.1, komputer Dell G3.

Mendapatkan elemen peringkat atas ialah mendapatkan elemen induk. Dalam jquery, anda boleh menggunakan fungsi parent() untuk mendapatkan elemen induk.

Langkah pelaksanaan

Langkah 1: Gunakan pemilih jQuery untuk memilih elemen yang ditentukan

1) pemilih elemen jQuery adalah berdasarkan elemen Nama elemen yang dipilih.

$("标签名")
Salin selepas log masuk

2) Pemilih id jQuery memilih elemen berdasarkan atribut id.

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

akan mengembalikan objek jQuery yang mengandungi elemen yang ditentukan.

Langkah 2: Gunakan fungsi parent() untuk mendapatkan elemen induk bagi elemen yang ditentukan

parent() mengembalikan elemen induk langsung bagi elemen yang dipilih. Kaedah ini hanya merentasi satu peringkat ke atas pokok DOM.

指定对象.parent(filter)
Salin selepas log masuk
参数描述
filter可选。规定缩小搜索父元素范围的选择器表达式。

Contoh 1: Kembalikan elemen induk bagi elemen Contoh 2: Gunakan parameter penapis untuk mengecilkan skop carian

<!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>
Salin selepas log masuk

Bolehkah jquery mendapatkan elemen sebelumnya?

[Pembelajaran yang disyorkan: tutorial video jQuery

,
<!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>
Salin selepas log masuk
video bahagian hadapan web

Bolehkah jquery mendapatkan elemen sebelumnya?

Atas ialah kandungan terperinci Bolehkah jquery mendapatkan elemen sebelumnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan