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

  • Bộ chọn :eq(n): chọn thành phần với một chỉ số n cụ thể.
  • :eq(0) sẽ chọn phần tử đầu tiên.
  • :eq(n) được dùng khi bạn muốn chọn một phần tử đặc biệt trong danh sách, hoặc trong các thành phần con mà không cần thêm bất kỳ class hay id nào.

Cấu trúc

$(':eq(n)')
$(':eq(-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(){
    $('ul li:eq(3)').css('border','1px solid blue');
});
</script>
</head>

<body>
    <ul>
        <li>li thứ nhất</li>
        <li>li thứ hai</li>
        <li>li thứ ba</li>
        <li>li thứ tư</li>
        <li>li thứ năm</li>
    </ul>
</body>
</html>

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

$('ul li:eq(3)') chọn phần tử li thứ 3.

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(){
    $('ul li:eq(-3)').css('border','1px solid blue');
});
</script>
</head>

<body>
    <ul>
        <li>li 0</li>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
        <li>li 4</li>
    </ul>
</body>
</html>

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

$('ul li:eq(3)') chọn phần tử li thứ 3 tính từ cuối danh sách.