How to iterate over three paragraphs and sets their color property red in jQuery ?

Last Updated : 26 May, 2021

In this article, we will learn how to iterate over three paragraphs and sets their color property red in jQuery. We have three paragraphs, and we want to iterate on these paragraphs and set their color property to red.

Approach: To do that, first, we add a button and on click this button, a function is called which name is fun() and in this function, we select the p element and iterate on each paragraph using each() function in Jquery and change its color to red using css() method in JQuery.

function fun(){
    $("p").each(function(){
        $(this).css("color","red");
    });
}

Example:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <style> 
      h1 { 
        color: green; 
      } 
    </style> 
    <script src= 
"https://code.jquery.com/jquery-3.5.0.js"> 
    </script> 
  </head> 
  <body> 
    <center> 
      <h1>GeeksforGeeks</h1> 
      <p>Welcome</p> 
      <p>to</p> 
      <p>GeeksforGeeks</p> 
      <strong> 
        Click the button to iterate on three 
        paragraph and change the color to 
        Red 
      </strong> 
      <br /> 
      <button onclick="fun()">Click</button> 
    </center> 
  
    <script> 
      function fun() { 
        $("p").each(function () { 
          $(this).css("color", "red"); 
        }); 
      } 
    </script> 
  </body> 
</html> 