title: jQuery ToggleClass on multiple elements
body: <p>I need to toggle a class on multiple elements and can't quite figure out how to traverse the dom and change them all.  I have a mute-all btn that, when clicked, should turn all the mute icons to a red color. It currently only turns the btn's icon which I'm clicking to a red color, but none of the others.  Thanks.</p>
  
  <pre><code>&lt;script&gt;$(function() {
          $(".js_mute-all").click(function() {
              $(".icon-mute").toggleClass('red');
          });
      });&lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="call-list"&gt;
          &lt;li class="byself"&gt;
              &lt;a href="#" class="btn btn-clear-white js_invite"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt; Invite Others&lt;/a&gt; &amp;nbsp; 
              &lt;a href="#" class="btn btn-clear-white right js_mute-all"&gt;&lt;i class="icon-mute"&gt;&lt;/i&gt; Mute All&lt;/a&gt;
  
              &lt;form class="invite-others"&gt;
                  &lt;select&gt;
                      &lt;option&gt;Select a person&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;input type="submit" value="Send" class="btn btn-clear-white" /&gt;
              &lt;/form&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;p&gt;Mary Jones&lt;/p&gt;
              &lt;span class="actions"&gt;&lt;i class="icon-mute" alt="mute"&gt;&lt;/i&gt; &lt;i class="icon-forward_alt" alt="Make presenter"&gt;&lt;/i&gt; &lt;i class="icon-no" alt="Kick out from conversation"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;p&gt;Ray Jackson&lt;/p&gt;
              &lt;span class="actions"&gt;&lt;i class="icon-mute" alt="mute"&gt;&lt;/i&gt; &lt;i class="icon-forward_alt" alt="Make presenter"&gt;&lt;/i&gt; &lt;i class="icon-no" alt="Kick out from conversation"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;p&gt;Joe Lazy&lt;/p&gt;
              &lt;span class="actions"&gt;&lt;i class="icon-mute" alt="mute"&gt;&lt;/i&gt; &lt;i class="icon-forward_alt" alt="Make presenter"&gt;&lt;/i&gt; &lt;i class="icon-no" alt="Kick out from conversation"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;p&gt;Tom Hanson&lt;/p&gt;
              &lt;span class="actions"&gt;&lt;i class="icon-mute" alt="mute"&gt;&lt;/i&gt; &lt;i class="icon-forward_alt" alt="Make presenter"&gt;&lt;/i&gt; &lt;i class="icon-no" alt="Kick out from conversation"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;p&gt;Mark Uraine&lt;/p&gt;
              &lt;span class="actions"&gt;&lt;i class="icon-mute" alt="mute"&gt;&lt;/i&gt; &lt;i class="icon-forward_alt" alt="Make presenter"&gt;&lt;/i&gt; &lt;i class="icon-no" alt="Kick out from conversation"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;p&gt;Some Otherguy&lt;/p&gt;
              &lt;span class="actions"&gt;&lt;i class="icon-mute" alt="mute"&gt;&lt;/i&gt; &lt;i class="icon-forward_alt" alt="Make presenter"&gt;&lt;/i&gt; &lt;i class="icon-no" alt="Kick out from conversation"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>