CODEWITHSUNDEEP
javascriptjqueryhtml
Sushil Pathak
Sushil Pathak

Reputation: 35

Changing the class of the html document using jQuery

I am new to jQuery. I need to add a class called "success" to every paragraph in divClass when button btnClassPSuccess is clicked. My HTML code is :- 

<div id="divClass">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
  <p>G</p>
</div>
<button id="btnClassPSuccess">Change Paragraphs to Success</button>

My jQuery code is :- 

$("#btnClassPSuccess").click(function () {
  $('#divClass').addClass("sucess");
});

Can you please correct me how to do this.

Upvotes: 0

Views: 32

Answers (2)

Scaramouche
Scaramouche

Reputation: 3267

$("#btnClassPSuccess").click(function () {
  $('#divClass p').addClass("success");
});
.success{
 background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClass">
 <p>A</p>
 <p>B</p>
 <p>C</p>
 <p>D</p>
 <p>E</p>
 <p>F</p>
 <p>G</p>
</div>
<button id="btnClassPSuccess">Change Paragraphs to Success</button>

I see your edit now:

$("#btnClassPSuccess").click(function () {
  $('#divClass p').addClass("success");
});

try it

Upvotes: 0

j08691
j08691

Reputation: 207900

You'd do it like:

$("#btnClassPSuccess").click(function () {
    $('#divClass p').addClass("success");
});

Example:

$("#btnClassPSuccess").click(function() {
  $('#divClass').addClass("success");
});
.success {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divClass">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
  <p>G</p>
</div>
<button id="btnClassPSuccess">Change Paragraphs to Success</button>

Upvotes: 2

Related Questions