Replacing div class in SharePoint using JQuery1.4min in Content Editor

Question

Very new on how JQuery works and trying to replace the class name of a summary links div tag.

<div class="slm-layout-main groupmarker">sometext</div>  

want to change that to

<div class="slm-layout-main groupmarker ms-rteFontSize-3">sometext</div>

and there are multiple places for this diz tag to be replaced.

I tried in the ContentEditor something like this:

<script src="/sites/lrp/Shared%20Documents/jquery-1.4.2.min.js" type="text/javascript"></script><script type="text/javascript">

$(".slm-layout-main groupmarker")
.removeClass("slm-layout-main groupmarker")
.addClass("slm-layout-main groupmarker ms-rteFontSize-3");
</script>

Any help is greatly appreciated. Thanks,

Answer 1

Your selector isn't quite what you think it is. Think of this as if it were a css class you were defining and you would end up looking for .slm-layout-main's that contain elements called <groupmarker>

$(".slm-layout-main groupmarker")

Should be -

$(".slm-layout-main.groupmarker")

Edit
After re-reading your application you will still need to iterate over your selection:

$(".slm-layout-main.groupmarker").each(function(){
   $(this)
      .removeClass("slm-layout-main groupmarker")
      .addClass("slm-layout-main groupmarker ms-rteFontSize-3");
});

Answer 2

This will get all elements with .slm-layout-main and for each one that also has .groupmaker it will add .ms-rteFontSize-3. This doesn't deal with the case where other classes are present.

$(".slm-layout-main").each(function(){
  if($(this).hasClass(".groupmaker")){
    $(this).addClass"ms-rteFontSize-3");
  }
});