Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Cách dùng :nth-child() Selector trong jQuery
:nth-child() Selector sẽ chọn tất cả các phần tử con thứ n nào đó trong các 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-child() 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).
Các bạn cần lưu ý để tránh bị nhầm lẫn giữa :nth-child(n) và :eq(n), mặc dù kết quả của chúng khác nhau khá nhiều. Điều đầu tiên mình đã đề cập ở trên, :nth-child(n) sẽ bắt đầu từ 1 còn :eq(n) sẽ bắt đầu từ phần tử 0. Thứ hai là cách hoạt động của chúng, trong khi :nth-child(n) sẽ chọn phần tử thứ n trong tất cả các phần tử con của selector đặt trước nó, thì :eq(n) sẽ chọn phần tử thứ n-1 trong các kết quả trả về của selector đặt trước nó. Các bạn nên xem ví dụ để hiểu rõ hơn.
Cú pháp
jQuery( ":nth-child(index)" )
Trong đó:
Bài viết này được đăng tại [free tuts .net]
- 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-child(even),:nth-child(4n)).
Ví dụ
Tìm kiếm các thẻ li mô tả thời gian của khóa học(thẻ thứ 3 trong số các thẻ con của thẻ ul) và định dạng cho chúng:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại freetuts.net</title>
<script src="https://freetuts.net/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Học lập trình miễn phí tại freetuts.net</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 2</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-child(3)" ).css( "color", "red");
}
</script>
</body>
</html>Kết quả:
Ví dụ 2: Ta sẽ cùng so sánh kết quả khi sử dụng :nth-child(n) và :eq(n) để tìm ra sự khác biệt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Học lập trình miễn phí tại freetuts.net</title>
<script src="https://freetuts.net/cnd/js/jquery/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1>Học lập trình miễn phí tại freetuts.net</h1>
<ul id="nth-child">
<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 id="eq">
<h3>Khóa học 2</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(){
$( "#nth-child li:nth-child(2)" ).css( "color", "red");
$( "#eq li:eq(2)" ).css( "color", "blue");
}
</script>
</body>
</html>Như các bạn có thể thấy, cùng một chỉ số n=2 nhưng hai selector cho ra kết quả hoàn toàn khác nhau, mình hi vọng các bạn sẽ không bao giờ nhầm lẫn giữa 2 selector này sau khi đọc xong bài viết này :D.
Kết quả:
Tham khảo: jquery.com
