jQuery ToggleClass on multiple elements

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.

<script>$(function() {
        $(".js_mute-all").click(function() {
            $(".icon-mute").toggleClass('red');
        });
    });</script>

HTML

<ul class="call-list">
        <li class="byself">
            <a href="#" class="btn btn-clear-white js_invite"><i class="icon-plus"></i> Invite Others</a> &nbsp; 
            <a href="#" class="btn btn-clear-white right js_mute-all"><i class="icon-mute"></i> Mute All</a>

            <form class="invite-others">
                <select>
                    <option>Select a person</option>
                </select>
                <input type="submit" value="Send" class="btn btn-clear-white" />
            </form>
        </li>
        <li>
            <p>Mary Jones</p>
            <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span>
        </li>
        <li>
            <p>Ray Jackson</p>
            <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span>
        </li>
        <li>
            <p>Joe Lazy</p>
            <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span>
        </li>
        <li>
            <p>Tom Hanson</p>
            <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span>
        </li>
        <li>
            <p>Mark Uraine</p>
            <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span>
        </li>
        <li>
            <p>Some Otherguy</p>
            <span class="actions"><i class="icon-mute" alt="mute"></i> <i class="icon-forward_alt" alt="Make presenter"></i> <i class="icon-no" alt="Kick out from conversation"></i></span>
        </li>
    </ul>

Solution

$(".js_mute-all").click(function(e)
{
    e.preventDefault();
    $(".icon-mute").toggleClass("red");
});

Does the trick for me: http://jsfiddle.net/h6h2f/1/

By passing the event e to the function then preventing the default action (which is to follow the anchor), your original code works fine.