: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.