How to remove and add a new css class with jQuery?

Here is my example

<a href="javascript:void(0)" id="ctl00_ctl00_cphContent_cphInnerContent_ViewPhotosCtrl_ddRating_A" title="10" style="text-decoration:none"><span id="ctl00_ctl00_cphContent_cphInnerContent_ViewPhotosCtrl_ddRating_Star_1" class="ratingStar emptyRatingSt开发者_JAVA技巧ar" style="float:left;">&nbsp;</span><span id="ctl00_ctl00_cphContent_cphInnerContent_ViewPhotosCtrl_ddRating_Star_2" class="ratingStar filledRatingStar" style="float:left;">&nbsp;</span><span id="ctl00_ctl00_cphContent_cphInnerContent_ViewPhotosCtrl_ddRating_Star_3" class="ratingStar filledRatingStar" style="float:left;">&nbsp;</span><span id="ctl00_ctl00_cphContent_cphInnerContent_ViewPhotosCtrl_ddRating_Star_4" class="ratingStar filledRatingStar" style="float:left;">&nbsp;</span><span id="ctl00_ctl00_cphContent_cphInnerContent_ViewPhotosCtrl_ddRating_Star_5" class="ratingStar filledRatingStar" style="float:left;">&nbsp;</span>
</a>

so I need to remove ratingStar filledRatingStar class on click from all child elements of anchor tab and apply a different class ratingStar emptyRatingStar

---

You can use .addClass() and .removeClass():

$(document).ready(function(){
  $("#ctl00_ctl00_cphContent_cphInnerContent_ViewPhotosCtrl_ddRating_A").click(function(){
    $(this).find("span").removeClass("filledRatingStar").addClass("emptyRatingStar");
  });
});

Hope this helps. Cheers

---

Try:

$("a").click(function() {
    $(this).children().removeClass("filledRatingStar").addClass("emptyRatingStar");
});

---

$("a").click(function(){
   $(this).children().removeClass("filledRatingStar").addClass("emptyRatingStar");
});