Получить элемент по индексу в 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>
97
dom get jquery

5 ответов

$(...)[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'});

docs:

.get(index) Returns: Element

  • описание: извлеките элементы DOM, соответствующие объекту jQuery.
  • см.:https://api.jquery.com/get/

.eq(index) возвращает: jQuery

  • описание: уменьшите набор сопрягаемых элементов к одному по указанному индексу.
  • см.:https://api.jquery.com/eq/
220

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

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

можно использовать метод эквалайзера или селектор:

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

есть еще один способ получить элемент по индексу в 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>

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

0

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