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

117

У меня есть неупорядоченный список и индекс 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>

jquery dom get Рама Рао М
источник

3

Два способа, которые вы используете, возвращают элементы dom, а не объекты jQuery, поэтому вызов .css не будет работать с ними. Ответ Дариуса ниже с использованием eq - это то, что вы хотите.

Ричард Далтон,

258

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

gdoron поддерживает Монику
источник

20

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

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

Кристофер Элиассон
источник

13

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

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

Darius
источник

1

Вы могли бы упростить селектор с помощью $('ul li').eq(index).css({'background-color':'#343434'});

gdoron поддерживает Монику

1

Но в большинстве браузеров селектор $('ul').find('li')работает быстрее. [1 , 2 ]

Дариус

2

Есть еще один способ получить элемент по индексу в 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 для соответствия любому элементу, который вам нужен.

Юрий Федоров
источник

-1

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

Адам Х
источник

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

Ответы: