title: jQuery replace all of an element's classes of a certain pattern with a different class
body: <p>I have a div which contains many divs. All of these subdivs have a number of classes that match a certain naming pattern. I have many classes named like "tile1Full","tile1Thumb","BG1Full","BG1Thumb". So my html might look like this:</p>
  
  <pre><code>&lt;div id=parent&gt;
      &lt;div&gt;
          &lt;div class='tile1Full BG2Full border1'&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class='tile3ContainerFull border1'&gt;
              &lt;div class=tile2x2Full border3&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I would like to replace all classes that have "Full" in the name with their "Thumb" counterpart, so the result would be this:</p>
  
  <pre><code>&lt;div id=parent&gt;
      &lt;div&gt;
          &lt;div class='tile1Thumb BG2Thumb border1'&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div class='tile3ContainerThumb border1'&gt;
          &lt;div class=tile2x2Thumb border3&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is what I came up with:</p>
  
  <pre><code>contents.find('div').each(function (i) {
      if ($(this).attr('class')!==undefined)
      {
          $(this).attr('class',$(this).attr('class').replace(/Full/g,'Thumb'));
      }
  });
  </code></pre>
  
  <p>The problem is, according to Firefox "Inspect Element", when I look at the class attribute, the new class names are there. However, when I look at the CSS inspector, those classes are not actually being applied. It no longer applies the "Full" classes, as expected, but it does not apply the "Thumb" classes either.</p>
  
  <p>One of the things the class does is set the width and height of the div. The divs themselves contain no content; just background images, so since the new classes are not being applied, they all have widths and heights of 0 and in effect disappear. </p>
  
  <p>Why would the attribute inspector report that they have the desired class, but then the CSS inspector shows that those classes are not being applied?</p>
  
  <p>Thanks</p>