14/08/2018, 09:48
:nth-of-type() Selector trong jquery
:nth-of-type() Selector sẽ chọn các phần tử con thứ n nào đó trong số các phần tử cùng cấp và có cùng tên thẻ trong một phần tử cha với n là số được cung cấp như một tham số khi gọi selector. Không giống như các index-related selectors (:eq(), :lt(), :gt(), :even, :odd), do sự thực thi ...
:nth-of-type() Selector sẽ chọn các phần tử con thứ n nào đó trong số các phần tử cùng cấp và có cùng tên thẻ trong một phần tử cha với n là số được cung cấp như một tham số khi gọi selector.
Không giống như các index-related selectors (:eq(), :lt(), :gt(), :even, :odd), do sự thực thi :nth-of-type() Selector bắt nguồn từ CSS nên giá trị của n sẽ bắt đầu từ 1 (các index-related selectors đầu từ 0). Ví dụ, $( "li:nth-of-type(1)" ) sẽ lựa chọn phần tử li đầu tiên, $( "li:nth-of-type(2)" ) sẽ lựa chọn phần tử li thứ hai.
Cú pháp
Cú pháp
jQuery( ":nth-of-type(index)" )
Trong đó:
- index là chỉ số của phần tử muốn chọn bắt đầu từ 1, index cũng có thể là chuỗi odd, even hoặc một phép tính toán học(:nth-of-type(even), :nth-of-type(4n)).
Ví dụ
Tìm kiếm các thẻ li mô tả thời gian của khóa học(thẻ li thứ 2 trong số các thẻ li con của thẻ ul) và định dạng cho chúng:
Code
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại code24h.com</title>
<script src="https://code24h.com/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Học lập trình miễn phí tại code24h.com</h1>
<ul class="freetut">
<h3>Khóa học 1</h3>
<li> Name: PHP</li>
<li>Time: 48 Videos</li>
<li>Author: Nguyễn Văn A</li>
</ul>
<ul class="freetut">
<h3>Khóa học 1</h3>
<li> Name: HTML</li>
<li>Time: 28 Videos</li>
<li>Author: Nguyễn Văn B</li>
</ul>
<button onclick="myFunction()">Click vào đây để xem kết quả</button>
<script>
function myFunction(){
$( ".freetut li:nth-of-type(2)" ).css( "color", "red");
}
</script>
</body>
</html>Kết quả:
Tham khảo: jquery.com
Các loại api khác
- jQuery Selector
- jQuery Events
Nguồn: code24h.com
