only-of-type
Định nghĩa và sử dụng Bộ chọn :only-of-type: chọn thành phần con trong các thành phần cha, khi thành phần cha có một thành phần con là chính nó. Trong thành phần cha có thể chứa nhiều thành phần con, tuy nhiên thành phần con được chọn phải là duy nhất, không được có từ […]
Định nghĩa và sử dụng
- Bộ chọn :only-of-type: chọn thành phần con trong các thành phần cha, khi thành phần cha có một thành phần con là chính nó.
- Trong thành phần cha có thể chứa nhiều thành phần con, tuy nhiên thành phần con được chọn phải là duy nhất, không được có từ 2 trở lên.
Cấu trúc
Đã được thêm vào từ phiên bản 1.9
$(':only-of-type')
$('tag:only-of-type')
Ví dụ
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('p:only-of-type').css('background-color','#cccccc');
});
</script>
</head>
<body>
<p>p tự do đầu tiên</p>
<div>
<ul>
<li>
<p>p duy nhất của li</p>
<div>div duy nhất của li</div>
</li>
<li>
<p>p duy nhất của li</p>
</li>
</ul>
<p>p đầu tiên của div</p>
<p>p thứ 2 của div</p>
<ul>
<li>
<p>p đầu tiên của li</p>
<p>p cuối cùng của li</p>
</li>
</ul>
<p>p thứ 3 của div</p>
<p>p cuối cùng của div</p>
</div>
<p>p tự do thứ 2</p>
<p>p tự do cuối cùng</p>
</div>
</body>
</html>
Hiển thị trình duyệt:
p tự do đầu tiên
p duy nhất của li
div duy nhất của lip duy nhất của li
p đầu tiên của div
p thứ 2 của div
- p đầu tiên của li
p cuối cùng của li
p thứ 3 của div
p cuối cùng của div
p tự do thứ 2
p tự do cuối cùng
Ta thấy những thành phần <p> được chọn đều là thành phần duy nhất có trong thành phần cha.
