Получить элемент по индексу в 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>
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/
вы можете использовать jQuery .eq()
метод для получения элемента с определенным индексом.
$('ul li').eq(index).css({'background-color':'#343434'});
можно использовать метод эквалайзера или селектор:
$('ul').find('li').eq(index).css({'background-color':'#343434'});
есть еще один способ получить элемент по индексу в 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 для соответствия любому элементу, который вам нужен.
вы можете пропустить 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>