SELECTORS - Even Element Selector

The Even Element Selector is used to select all the even occurence of a particular element.

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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p:even').text("The even contents of p element got replaced")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three <p> 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 <p> elements with 0, 1 and 2.

0 -->   <p class = "para1"> First Paragraph </p>
1 -->   <p class = "para2"> Second Paragraph </p>
2 -->   <p class = "para3"> Third Paragraph </p>

Now, the even numbers are 0 and 2.

Which is the First Paragraph.

<p class = "para1"> First Paragraph </p>

And the Third Paragraph.

<p class = "para3"> Third Paragraph </p>

And on button click, all the contents of

<p class = "para1"> First Paragraph </p>

And

<p class = "para3"> Third Paragraph </p>

Gets changed to The even contents of p element got replaced.

And this happened with the even element selector.

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

The moment the button is clicked, JQuery statement gets triggered.

$('p:even').text("The even contents of p element got replaced")

And the JQuery code locates the even occurence of <p> element and changes its contents.

❮❮ PREV NEXT ❯❯