Skip to content
Related Articles

Related Articles

Improve Article

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=
    </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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :