Get an element by index in jQuery
I have an unordered list and the index of an li
tag in that list. I have to get the li
element by using that index and change its background color. Is this possible without looping the entire list? I mean, is there any method that could achieve this functionality?
Here is my code, which I believe would work...
<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 objects don't have css
function, use the last...
$('ul li').eq(index).css({'background-color':'#343434'});
docs:
.get(index)
Returns: Element
- Description: Retrieve the DOM elements matched by the jQuery object.
- See: https://api.jquery.com/get/
.eq(index)
Returns: jQuery
- Description: Reduce the set of matched elements to the one at the specified index.
- See: https://api.jquery.com/eq/
You can use jQuery's .eq()
method to get the element with a certain index.
$('ul li').eq(index).css({'background-color':'#343434'});
You can use the eq method or selector:
$('ul').find('li').eq(index).css({'background-color':'#343434'});
There is another way of getting an element by index in jQuery using CSS :nth-of-type
pseudo-class:
<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>
There are other selectors that you may use with jQuery to match any element that you need.