Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menanyakan elemen sebelumnya dengan jquery

Bagaimana untuk menanyakan elemen sebelumnya dengan jquery

青灯夜游asal: 2022-03-16 15:51:176023semak imbas

Dalam jquery, anda boleh menggunakan kaedah prev() untuk menanyakan elemen sebelumnya bagi elemen yang ditentukan Kaedah ini boleh mengembalikan elemen adik-beradik sebelumnya bagi elemen yang dipilih ialah "$(selector).prev (penapis) "; "penapis" ialah parameter pilihan. Jika ditetapkan, ia boleh mengecilkan skop pencarian elemen adik-beradik sebelumnya.

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.2.1, komputer Dell G3.

Dalam jquery, anda boleh menggunakan kaedah prev() untuk menanyakan elemen sebelumnya bagi elemen tertentu.

kaedah prev() mengembalikan elemen adik-beradik sebelumnya bagi elemen yang dipilih.

Elemen adik beradik ialah elemen yang berkongsi elemen induk yang sama.

Nota: Kaedah ini hanya mengembalikan satu elemen.

Sintaks:

$(selector).prev(filter)

Penapis parameter: Pilihan, menentukan ungkapan pemilih yang mengecilkan skop carian untuk elemen adik-beradik sebelumnya.

Contoh 1: Kembalikan elemen adik beradik sebelumnya bagi setiap elemen

dengan nama kelas "mula":

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("li.start").prev().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>
		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
	</body>
</html>

Bagaimana untuk menanyakan elemen sebelumnya dengan jquery

Contoh 2: Pilih elemen adik beradik sebelumnya bagi setiap elemen

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("div").prev().css("background-color", "yellow");
			});
		</script>
	</head>
	<body>

		<p>这是一个P元素。</p>
		<h2>这是一个标题，并且是div元素的上一个兄弟元素</h2>
		<div style="border:1px solid black;padding:10px;">这是一个div元素。</div>
		<p>这是另一个P元素。</p>
		<p>这是一个P元素，并且是div元素的上一个兄弟元素。</p>
		<div style="border:1px solid black;padding:10px;">
			<p>这是div里面的一个P元素。</p>
		</div>

	</body>
</html>

[Pembelajaran yang disyorkan: Tutorial video jQuery, video pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk menanyakan elemen sebelumnya dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

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

Artikel sebelumnya：Tentukan sama ada hendak menggunakan operator apa untuk objek jqueryArtikel seterusnya：Tentukan sama ada hendak menggunakan operator apa untuk objek jquery

Artikel berkaitan

Lihat lagi