add / remove class on span inside a tag

Question

I've tried various options but can't get the silly thing to work. How do I get the span inside an < a > tag within an < li > to change class to "active"; then remove it when another < a > is clicked?

<ul id="dumb">
<li><a href="#">Something<span></span></a></li>
<li><a href="#">Something Else<span></span></a></li>
</ul>

Clicking the < a > should give the span a class of "active" and when another is clicked, it should remove it from the original and add it to the span of that < a >...

Thanks!

Answer 1

Try this:

$(document).ready(function(){
    var $MySpans = $("#dumb li a span");
    $MySpans.click(function(){
        $MySpans.removeClass();
        $(this).addClass("active");
    });
});

You might try this as well as it will be a faster selector if it works:

var $MySpans = $("#dumb>li>a>span");

Answer 2

$(function(){
      $("#dumb > li > a").click ( function(){
      $("#dumb > li > a > span").removeClass ( 'active' );
      $(this).find('span').addClass('active');
      return false;
     });
});