Question

i have the following code:

HTML

<div id="step-holder">
    <div class="step-no">1</div>
    <div class="step-dark-left"><a href="#">Basic details</a></div>
    <div class="step-dark-right">&nbsp;</div>
    <div class="step-no-off">2</div>
    <div class="step-light-left"><a href="#">SEO</a></div>
    <div class="step-light-right">&nbsp;</div>
    <div class="step-no-off">3</div>
    <div class="step-light-left"><a href="#">Preview</a></div>
    <div class="step-light-round">&nbsp;</div>
    <div class="clear"></div>
</div>

JQUERY

$('#step-holder a').click(function (e) {
    e.preventDefault();
    $(this).parent('.step-light-left').each(function () {
        $(this).removeClass('.step-light-left').addClass('.step-dark-left');
    });
});

but the second $(this) (inside the .each) still reffers to the original $(this).
so, it does not work.

how can this be acheieved ? i dont understand why the second $(this) does not refer to the .each() current item.

or maybe, if you have another solution to change all step-light-left to step-light-right and the other way around.

what i need to do is turn off all the ‘non-clicked’ divs and turn on the clicked one.

Answer 1

solution:

$('#step-holder a').click(function (e) {
    e.preventDefault();
    $('#step-holder > div').each(function () {
        if ($(this).attr('class') == 'step-dark-left') {
            $(this).removeClass('step-dark-left');
            $(this).addClass('step-light-left');
        }
    });
    $(this).parent().removeClass('step-light-left');
    $(this).parent().addClass('step-dark-left');
});