Отримайте елемент за індексом у jQuery

У мене в цьому списку є не упорядкований список та індекс liтегу. Я повинен отримати liелемент за допомогою цього індексу та змінити його колір тла. Чи можливо це без циклічного циклу? Я маю на увазі, чи є якийсь метод, який міг би досягти цієї функціональності?

Ось мій код, який, на мою думку, спрацював би ...

<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

Об'єкти DOM не мають cssфункції, використовують останні ...

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

Документи:

.get(index) Повернення: Елемент

• Опис: Отримайте елементи DOM, які відповідають об'єкту jQuery.
• Дивіться: https://api.jquery.com/get/

.eq(index) Повертає: jQuery

• Опис: Зменшіть набір відповідних елементів до встановленого індексу.
• Дивіться: https://api.jquery.com/eq/

.eq()Для отримання елемента з певним індексом можна використовувати метод jQuery .

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

Ви можете використовувати метод eq або селектор :

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

Існує ще один спосіб отримання елемента за індексом у jQuery за допомогою :nth-of-typeпсевдокласу CSS :

<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>

Є й інші селектори, які ви можете використовувати з jQuery, щоб відповідати будь-якому потрібному вам елементу.

Ви можете пропустити jquery і просто використовувати теги стилю CSS:

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