nth-of-type(n)

Định nghĩa và sử dụng

• Bộ chọn :nth-of-type(n): chọn thành phần thứ “n”, gốc tính được tính từ thành phần đầu tiên trở đi.
• Thứ tự “n” được tính cho tất cả các thành phần cùng cấp.
• Giá trị “n” có thể là số hoặc một hàm (function).

Cấu trúc

Đã được thêm vào từ phiên bản 1.9

$(':nth-of-type(n)')

$('tag:nth-of-type(n)')

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:nth-of-type(3)').css('background-color','#cccccc');
});
</script>
</head>

<body>
<p>Thành phần độc lập thứ nhất</p>
<p>Thành phần độc lập thứ 2</p>
<p>Thành phần độc lập thứ 3</p>
<p>Thành phần độc lập thứ 4</p>
<p>Thành phần độc lập thứ 5</p>
<p>Thành phần độc lập thứ 6</p>

<div>
    <p>Thành phần thứ nhất</p>
    <p>Thành phần thứ 2</p>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <div>Thành phần thứ 2</div>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <ul>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
    </ul>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>
</body>
</html>

Hiển thị trình duyệt:

Thành phần độc lập thứ nhất

Thành phần độc lập thứ 2

Thành phần độc lập thứ 3

Thành phần độc lập thứ 4

Thành phần độc lập thứ 5

Thành phần độc lập thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

• ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
• ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Ta thấy những thành phần <p> ở vị trí thứ 3 đều đã được chọn.