Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menyembunyikan elemen kanak-kanak dalam jquery

Bagaimana untuk menyembunyikan elemen kanak-kanak dalam jquery

青灯夜游
Lepaskan: 2022-03-01 17:51:56
asal
2703 orang telah melayarinya

Cara menyembunyikan elemen anak dalam jquery: 1. Gunakan kaedah children() dan hide(), sintaksnya ialah "$("elemen ibu bapa").children().hide()"; Gunakan find() Dan kaedah hide() , sintaksnya ialah "$("elemen induk").find("elemen anak").hide()".

Bagaimana untuk menyembunyikan elemen kanak-kanak dalam jquery

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

elemen kanak-kanak tersembunyi jquery

Kaedah pelaksanaan:

  • Mula-mula anda perlu memilih kanak-kanak elemen

    • kaedah kanak-kanak(): Dapatkan elemen subset langsung di bawah elemen ini

    • kaedah find(): Dapatkan semua (termasuk kanak-kanak) di bawah elemen ini Subset set) elemen subset

  • dan kemudian gunakan kaedah hide() untuk menyembunyikan elemen anak yang dipilih.

1 Gunakan kaedah children() dan hide()

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("ul").children().hide();
				});
			});
		</script>
		<style>
			.intro {
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<ul class="intro ">
		  <li>list1
		    <ul>
			      <li>list1-1</li>
			      <li>list1-2</li>
			  </ul>
			</li>
		  <li>list2
		    <ul>
			      <li>list2-1</li>
			      <li>list2-2</li>
			  </ul>
			</li>
		  <li>list3
		    <ul>
			      <li>list3-1</li>
			      <li>list3-2</li>
			  </ul>
			</li>
		</ul>
		<button>隐藏子元素</button>
	</body>
</html>
Salin selepas log masuk

Bagaimana untuk menyembunyikan elemen kanak-kanak dalam jquery

2. Gunakan kaedah find() dan hide()

$(document).ready(function() {
	$("button").click(function() {
		$("ul").find("li").hide();
	});
});
Salin selepas log masuk

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

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan elemen kanak-kanak dalam jquery. 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