SELECTORS - :eq(index) Selector

The :eq(index) Selector is used to select a particular element based on indexes.

Let us simplify with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p class = "para1"> First Paragraph </p>
    	<p class = "para2"> Second Paragraph </p>
    	<p class = "para3"> Third Paragraph </p>
    	
    	<button> Click me </button>

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('eq(0)').text("The contents of first p element got replaced")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three  elements,

<p class = "para1"> First Paragraph </p>
<p class = "para2"> Second Paragraph </p>
<p class = "para3"> Third Paragraph </p>

Now, just remember the count of elements starts from '0'. So, we we mark the above  elements with '0', '1' and '2'.

0

 First Paragraph

1

 Second Paragraph

2

 Third Paragraph

Now, since we want to change the contents of the first element. Which is the 'First Paragraph' at index '0'.

And the '$('eq(0)')' selector.

$('button').click( function() {
	$('eq(0)').text("The contents of first p element got replaced")
});

Finds the first occurence of  element and changes it.

❮❮ PREV NEXT ❯❯