Rumah > Artikel > hujung hadapan web > Apakah cara untuk mencari ibu bapa dalam jquery?

Apakah cara untuk mencari ibu bapa dalam jquery?

青灯夜游asal: 2022-11-22 19:01:398454semak imbas

4 kaedah: 1. parent(), anda boleh mencari "elemen induk" bagi elemen semasa, sintaksnya ialah "$(selector).parent(expression)"; boleh mencari semua Untuk memilih elemen nenek moyang elemen, sintaksnya ialah "$(selector).parents(expression)"; selector).parentsUntil(expression)" ; 4. closest(), unsur nenek moyang pertama bagi elemen yang dipilih.

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

kaedah jquery mencari ibu bapa

ibu bapa()
ibu bapa()
ibu bapaSehingga()
paling dekat()

Kaedah 1: ibu bapa()

Dalam jQuery, kita boleh menggunakan kaedah parent() untuk mencari "elemen induk" bagi elemen semasa. Ingat, elemen hanya mempunyai satu induk.

Sintaks:

$(selector).parent(expression)

Penerangan: Ungkapan parameter mewakili ungkapan pemilih jQuery, digunakan untuk menapis elemen induk. Apabila parameter diabaikan, semua elemen induk dipilih. Jika parameter tidak ditinggalkan, elemen induk yang memenuhi syarat akan dipilih. Bukankah elemen

hanya mempunyai satu elemen induk? Mengapa masih terdapat perkara seperti "elemen induk yang layak"? Untuk ini, lihat contoh berikut.

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("p").parent(".lvye").css("color", "red");
			})
		</script>
	</head>
	<body>
		<div>
			<p>php中文网jQuery入门教程</p>
		</div>
		<div class="lvye">
			<p>php中文网jQuery入门教程</p>
		</div>
		<div>
			<p>php中文网jQuery入门教程</p>
		</div>
	</body>
</html>

Kesannya adalah seperti berikut:

Apakah cara untuk mencari ibu bapa dalam jquery?

Kaedah 2: ibu bapa()

Kaedah ibu bapa() adalah serupa dengan kaedah induk(), kedua-duanya digunakan untuk mencari unsur nenek moyang bagi elemen yang dipilih. Tetapi kedua-dua kaedah ini juga mempunyai perbezaan penting.

Malah, kedua-dua kaedah ini juga mudah dibezakan dalam bentuk tunggal, dan hanya ada satu unsur moyang yang perlu dicari iaitu unsur induk. Ibu bapa adalah bentuk jamak, dan unsur nenek moyang yang ingin dicari tentunya semua unsur nenek moyang.

Sintaks:

$(selector).parents(expression)

Penerangan: Ungkapan parameter mewakili rentetan ungkapan pemilih jQuery, digunakan untuk menapis unsur nenek moyang. Apabila hujah ditinggalkan, semua unsur nenek moyang dipilih. Jika parameter tidak ditinggalkan, elemen moyang yang memenuhi syarat akan dipilih.

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#btn").click(function() {
					var parents = $("span").parents()
						.map(function() {
							return this.tagName;
						})
						.get().join(",");
					alert("span元素的所有祖先元素为：" + parents.toLowerCase());
				});
			})
		</script>
	</head>
	<body>
		<div>
			<p><strong><span>jQuery入门教程</span></strong></p>
		</div>
		<input id="btn" type="button" value="获取" />
	</body>
</html>

Kesannya adalah seperti berikut:

Apakah cara untuk mencari ibu bapa dalam jquery?

2-Apakah cara untuk mencari ibu bapa dalam jquery?

Kaedah 3: parentsUntil()

Kaedah parentsUntil() ialah tambahan kepada kaedah ibu bapa() Ia boleh mencari semua elemen nenek moyang dalam julat yang ditentukan, yang bersamaan dengan memintas beberapa elemen nenek moyang daripada. koleksi yang dikembalikan oleh kaedah ibu bapa().

Sintaks:

$(selector).parentsUntil(expression)

Parameter pemilih mewakili rentetan ungkapan pemilih jQuery yang digunakan untuk menentukan unsur nenek moyang julat. Parameter ini adalah pilihan Jika diabaikan, semua elemen nenek moyang akan dipadankan, yang sama dengan hasil kaedah ibu bapa().

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

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

<!-- 在这个例子中,我们选择在span和div元素之间的所有祖先元素。 -->
</html>

Apakah cara untuk mencari ibu bapa dalam jquery?

Kaedah 4: closest()

closest() kaedah mengembalikan unsur nenek moyang pertama bagi elemen yang dipilih .

Bermula dari elemen semasa
Lintas pokok DOM dan kembalikan moyang tunggal pertama yang sepadan dengan ungkapan yang diluluskan
Mengembalikan objek jQuery yang mengandungi sifar atau satu elemen

Sintaks:

$(selector).closest(expression)

Contoh: Kembalikan ialah elemen

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

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

Apakah cara untuk mencari ibu bapa dalam jquery?

[Pembelajaran yang disyorkan: tutorial video javascript]

Atas ialah kandungan terperinci Apakah cara untuk mencari ibu bapa dalam jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery 字符串对象 dom 选择器 li

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：Apakah maksud Cina DOM dalam jqueryArtikel seterusnya：Apakah maksud Cina DOM dalam jquery

Artikel berkaitan

Lihat lagi