Получить элемент по индексу в jquery

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

Вот мой код, который, я считаю, будет работать...

<script>
  var index = 3;
</script>
   <ul>
     <li>India</li>
     <li>Indonesia</li>
     <li>China</li>
     <li>United States</li>
     <li>United Kingdom</li>
   </ul>
<script>
  //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>

Ответы

Ответ 1

$(...)[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/

Ответ 2

Вы можете использовать метод jQuery .eq(), чтобы получить элемент с определенным индексом.

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

Ответ 3

Вы можете использовать метод eq или селектор:

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

Ответ 4

Существует еще один способ получить элемент по индексу в jQuery, используя CSS :nth-of-type псевдокласс:

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

Есть другие selectors, которые вы можете использовать с jQuery для соответствия любому элементу, который вам нужен.

Ответ 5

Вы можете пропустить 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>