jQuery traversal - keturunan


jQuery Traversal - Keturunan

Keturunan ialah anak, cucu, cicit, dsb.

Dengan jQuery, anda boleh melintasi pokok DOM untuk mencari keturunan unsur.

Melintasi pokok DOM

Berikut ialah dua Kaedah jQuery untuk melintasi pokok DOM:

kanak-kanak()

cari()

kaedah jQuery children()

kaedah children() mengembalikan semua elemen anak langsung bagi elemen yang dipilih.

Kaedah ini hanya akan merentasi pokok DOM satu tahap ke bawah.

Contoh berikut mengembalikan semua anak langsung bagi setiap elemen <div>

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Anda juga boleh menggunakan parameter pilihan untuk menapis carian untuk elemen kanak-kanak.

Contoh berikut mengembalikan semua <p> elemen dengan nama kelas "1" yang merupakan anak langsung <div>:

Instance

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

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

Jalankan Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian


kaedah jQuery find()

kaedah find() mengembalikan elemen turunan elemen yang dipilih, semua turun ke zuriat terakhir.

Contoh berikut mengembalikan semua <span> elemen yang merupakan keturunan <div>: Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p class="1">p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p class="2">p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh berikut mengembalikan semua keturunan <div>:

Instance

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

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


←
→