Menu
Question
[Question]

Find element by index in jQuery  

I have the following HTML content

<div>
  <ul>
    <li>USA</li>
    <li>UK</li>
    <li>France</li>
    <li>Russia</li>
    <li>Belgium</li>
    <li>India</li>
  </ul>
</div>

<input id="btnHighlight" type="button" value="Highlight"/>

When the user clicks the Highlight button, the program should change the colour of a particular list item, let's say the third list item to blue colour.

I know that every list item has its own unique index. But how can I access it directly using jQuery?
1 Answers

To select the third li element, do this:

$("li").eq(2)

The eq accepts an index that identifies the position of an element in a set and it selects the element corresponding to that index number. The first element will have the index number 0, and so on.

<script>
  $(document).ready(function() {
    $("#btnHighlight").click(function() {
      $("li").eq(2).addClass("highlighted");
    });
  });
</script>

<style>
  .highlighted { color:blue; }
</style>

asked Sep 27, 2016
viewed 626 times
active Sep 27, 2016
Looking for a job?
Accenture
New York

JP/Morgan Chase
Dallas, Texas

Groundswell Cloud Solutions
Vancouver, Canada

Startup (stealth)
London, UK


Related
• Hover Over a matched element in jQuery
• Capture Hover event using jQuery
• Getting and Setting the value from an input text field with jQuery
• Display/Hide the content based on the checkbox state in jQuery
• Display/Hide the content based on the checkbox state in jQuery
• How do I refresh a page with JavaScript or jQuery?
• How to get the name of an element with jQuery
• How to get the name of an element with jQuery
• How to detect a click outside an HTML element?
• Difference between jQuery and Angular