:eq selector

:eq selector#

The :eq selector is a jQuery selector used to select elements with a specific index number within their parent element. This selector is useful when you want to select a specific element in a group of similar elements based on its position.

Syntax#

$("parentElement").find("childElement:eq(indexNumber)");

• parentElement: The parent element of the child elements you want to select.
• childElement: The child element you want to select based on its index number.
• indexNumber: The zero-based index number of the child element you want to select.

Example#

Let's say we have an unordered list with five list items:

<ul id="myList">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

If we want to select the third list item using the :eq selector, we can use the following code:

$("#myList").find("li:eq(2)").css("background-color", "yellow");

This code will select the third list item based on its index number (which is 2 since index numbers are zero-based) and change its background color to yellow.

Another way to achieve the same result is by using the eq() method:

$("#myList").find("li").eq(2).css("background-color", "yellow");

Both methods will select the third list item and change its background color to yellow.