jquery add and remove classes

Question

I have a navigational menu now how can i add a selected class after click to any of my spans and remove selected class from previous span using Jquery.

<div class="large-12 columns TSCSlot">
    <div class="large-10 columns DayRow">
        <div class="large-12 columns left DaySelected">
            <span class="Selected"></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>                      
        </div>
    </div>
</div>

$('div.large-12.columns.left.DaySelected > span').click(function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation; // stop the click from bubbling
    $(this).closest('span').find('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
});

span.Selected {
    background-color: #5e9e37 !important;
    color: white !Important;
}

Can anyone point me to what I'm doing wrong?

Answer 1

The target of your click is the span, so closest('span') will find itself, so your following find('.selected') will not find the "selected" element:

Try this instead: http://jsfiddle.net/TrueBlueAussie/6pg5as4n/

$(this).closest('.DaySelected').find('.selected').removeClass('selected');
$(this).addClass('selected');

Html:

<div class="large-12 columns TSCSlot">
    <div class="large-10 columns DayRow">
        <div class="large-12 columns left DaySelected">
            <span class="selected"></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>
            <span class=""></span>                      
        </div>
    </div>
</div>

Notes:

• Using closest with .DaySelected will ensure you do not modify other controls on the page. Your could also just use parent() eg $(this).parent().find('.selected').removeClass('selected')
• The second line then just adds the selected class to the clicked span .
• You have an uppercase S on selected in the html. Have changed that to lowercase s to match the code.
• You do not appear to need to prevent propagation and spans have no default operation to prevent. eg http://jsfiddle.net/TrueBlueAussie/6pg5as4n/1/
• Instead of e.preventDefault() and e.stopPropagation you can simply return false to do both . eg http://jsfiddle.net/TrueBlueAussie/6pg5as4n/2/

Answer 2

As You telling in post. You are clicking the current span You can add selected class ,remaining selected class are removed

$('div.large-12.columns.left.DaySelected > span').click(function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation; // stop the click from bubbling
    $('.Selected').removeClass('Selected');
    $(this).addClass('Selected');
});

NOTE :in css Selected not selected class

DEMO

Answer 3

Some small improvements:

<span class="Selected"</span> should be <span class="selected"></span>

(small beginning character for classes and > added)

$('div.large-12.columns.left.DaySelected > span').click(function(e) {
  e.preventDefault(); // prevent the default action
  e.stopPropagation; // stop the click from bubbling
  $(this).parent().find('.selected').removeClass('selected'); //removes all selected classes in this div
  $(this).addClass('selected');
});

Your click is binded on the <span> . So if you use jQuery(this) it is actually the span you want to change. So you dont need .parent() .find() or anything else to add the class to it.

Answer 4

I think your DOM select is wrong.

$('div.large-12.columns.left.DaySelected > span')

should be

$('div.large-12.columns .left.DaySelected > span')