Question

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 emptyRatingStar" 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

Answer 1

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