Lấy một phần tử theo chỉ mục trong jQuery

Tôi có một danh sách không có thứ tự và chỉ mục của một lithẻ trong danh sách đó. Tôi phải lấy liphần tử bằng cách sử dụng chỉ mục đó và thay đổi màu nền của nó. Điều này có thể thực hiện được mà không cần lặp lại toàn bộ danh sách không? Ý tôi là, có phương pháp nào có thể đạt được chức năng này không?

Đây là mã của tôi, mà tôi tin rằng sẽ hoạt động ...

<script type="text/javascript">
  var index = 3;
</script>

<ul>
    <li>India</li>
    <li>Indonesia</li>
    <li>China</li>
    <li>United States</li>
    <li>United Kingdom</li>
</ul>

<script type="text/javascript">
  // I want to change bgColor of selected li element
  $('ul li')[index].css({'background-color':'#343434'});

  // Or, I have seen a function in jQuery doc, which gives nothing to me
  $('ul li').get(index).css({'background-color':'#343434'});
</script>

$(...)[index]      // gives you the DOM element at index
$(...).get(index)  // gives you the DOM element at index
$(...).eq(index)   // gives you the jQuery object of element at index

Các đối tượng DOM không có csschức năng, hãy sử dụng ...

$('ul li').eq(index).css({'background-color':'#343434'});

tài liệu:

.get(index) Lợi nhuận: Phần tử

• Mô tả: Lấy các phần tử DOM được đối tượng jQuery so khớp.
• Xem: https://api.jquery.com/get/

.eq(index) Trả về: jQuery

• Mô tả: Giảm tập hợp các phần tử phù hợp thành một phần tử tại chỉ mục được chỉ định.
• Xem: https://api.jquery.com/eq/

Bạn có thể sử dụng .eq()phương thức của jQuery để lấy phần tử có chỉ mục nhất định.

$('ul li').eq(index).css({'background-color':'#343434'});

Bạn có thể sử dụng phương pháp eq hoặc bộ chọn :

$('ul').find('li').eq(index).css({'background-color':'#343434'});

Có một cách khác để lấy một phần tử theo chỉ mục trong jQuery bằng cách sử dụng CSS :nth-of-typepseudo-class:

<script>
    // css selector that describes what you need:
    // ul li:nth-of-type(3)
    var selector = 'ul li:nth-of-type(' + index + ')';
    $(selector).css({'background-color':'#343434'});
</script>

Có những bộ chọn khác mà bạn có thể sử dụng với jQuery để khớp với bất kỳ phần tử nào bạn cần.

Bạn có thể bỏ qua jquery và chỉ sử dụng gắn thẻ kiểu CSS:

 <ul>
 <li>India</li>
 <li>Indonesia</li>
 <li style="background-color:#343434;">China</li>
 <li>United States</li>
 <li>United Kingdom</li>
 </ul>