title: jQuery: change part of child's class name when parent's class changes
body: <p>I have the following HTML structure:</p>
  
  <pre><code>&lt;div id="settings-choose"&gt;
      &lt;a href="#setting1" class="setting-tab"&gt;
          &lt;div class="content"&gt;
              &lt;div class="icon setting1-off"&gt;&lt;/div&gt;
              &lt;div class="label"&gt;Setting 1&lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="#setting2" class="setting-tab"&gt;
          &lt;div class="content"&gt;
              &lt;div class="icon setting2-off"&gt;&lt;/div&gt;
              &lt;div class="label"&gt;Setting 2&lt;/div&gt;
          &lt;/div&gt;
      &lt;/a&gt;
      &lt;!-- more .setting-tab elements --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Whenever I click on one of the <code>.setting-tab</code> elements, I want to:</p>
  
  <ol>
  <li>Add the class <code>.selected</code> to that <code>.setting-tab</code> element (and remove it from the others)</li>
  <li>Replace the "<code>-off</code>" part of the class on its child <code>.icon</code> element with "<code>-on</code>" (and flip all of the others to "<code>-off</code>")</li>
  </ol>
  
  <p>I can do #1 successfully, but not #2. Here's what I have:</p>
  
  <pre><code>$("#settings-choose .setting-tab").click(function(){
      $("#settings-choose .setting-tab").removeClass("selected");
      $(this).addClass("selected");
  
      $("#settings-choose .setting-tab").each(function(){
          var icon = $(this).find(".icon"),
              state = icon.attr("class");
  
          if (!($(this).hasClass("selected"))){
              state.replace("-on", "-off");
          } else {
              state.replace("-off", "-on");
          }
      });
  });
  </code></pre>
  
  <p>This correctly adds the <code>.selected</code> class to whichever <code>.setting-tab</code> element was clicked and removes it from the others...</p>
  
  <pre><code>&lt;a href="#setting1" class="setting-tab selected"&gt;...&lt;/a&gt;
  &lt;a href="#setting2" class="setting-tab"&gt;...&lt;/a&gt;
  </code></pre>
  
  <p>But the class of the <code>.icon</code> element doesn't change...</p>
  
  <pre><code>&lt;a href="#setting1" class="setting-tab selected"&gt;
      &lt;div class="content"&gt;
          &lt;div class="icon setting1-off"&gt;&lt;/div&gt;
          &lt;div class="label"&gt;Setting 1&lt;/div&gt;
      &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I don't get any errors in the console, just...it doesn't change.</p>
  
  <p>Any ideas where I'm going wrong?</p>