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:
Share your thoughts in the comments
Please Login to comment...