penapis elemen kanak-kanak jQuery
| Nama | Penerangan | Contoh | |||||||||||||||
| :nth-child(index/even/odd/equation) |
| Cari li ke-2 dalam setiap ul: $("ul li:nth-child(2)") | |||||||||||||||
| :first-child | < ??>Padankan elemen anak pertama':first' hanya sepadan dengan satu elemen dan pemilih ini akan memadankan satu elemen anak untuk setiap elemen induk | Cari li pertama dalam setiap ul: $("ul li:first-child") | < /tr>|||||||||||||||
| padanan dengan elemen anak terakhir':last' hanya sepadan dengan satu elemen dan pemilih ini akan memadankan satu anak untuk setiap elemen induk Elemen | Cari yang terakhir dalam setiap ul li: $("ul li :last-child") | ||||||||||||||||
| :anak-sahaja | Jika elemen ialah satu-satunya elemen anak bagi elemen induk , itu akan dipadankan Jika elemen induk mengandungi elemen lain, ia tidak akan dipadankan. | Cari satu-satunya elemen anak dalam ul li: $("ul li:only-child") |
Nota:
1 :nth-child(index) bermula dari 1, dan eq(index) bermula dari 0, iaitu $(" ul. li:nth-child(0)").css("color","red") tidak boleh mendapatkan elemen padanan dan hanya boleh bermula dari 1, iaitu $("ul li:nth-child(1) ").css ("warna","merah"), dan eq(0) boleh diperolehi, perkara yang sama adalah untuk mendapatkan elemen anak pertama
:nth-child(even) ialah untuk mendapatkan nombor genap elemen anak , Iaitu, kedua, keempat, keenam..., dan :even bermula dari indeks 0, sepadan dengan indeks kedua, indeks keempat..., iaitu, pertama, ketiga, Kelima..., ia Nampaknya mereka semua mendapat bilangan item yang ganjil, perkara yang sama berlaku untuk :nth-child (ganjil) dan :odd
2 :first-child sepadan dengan elemen anak setiap kelas induk , dan :first sepadan dengan elemen anak, dan perkara yang sama berlaku untuk :last-child dan last
3. only-child: memadankan elemen yang merupakan satu-satunya elemen anak dalam elemen induk, iaitu elemen anak semasa ialah Satu-satunya elemen dalam kelas sepadan!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>無標(biāo)題頁</title>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
// $("ul li:first-child").css("color","red");
$("ul li:first").css("color","red");
// $("ul li:last-child").css("color","red");
// $("ul li:nth-child(even)").css("color","red");
// $("ul li:odd").css("color","red");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li>第一個(gè)元素</li>
<li>第二個(gè)元素</li>
<li>第三個(gè)元素</li>
<li>第四個(gè)元素</li>
<li>第五個(gè)元素</li>
<li>第六個(gè)元素</li>
</ul>
<ul>
<li>第一個(gè)元素</li>
<li>第二個(gè)元素</li>
<li>第三個(gè)元素</li>
<li>第四個(gè)元素</li>
<li>第五個(gè)元素</li>
<li>第六個(gè)元素</li>
</ul>
</div>
</form>
</body>
</html>
