CODEWITHSUNDEEP
jqueryhtml
Jitender
Jitender

Reputation: 7971

class swaping in jquery

I want to change class on click on a tag.

The requirement is when we click on tag whichever div has active should replace with second and then inside next li div which has class name second should replace with active. i made small function but it is not working properly. 

<div class="wrap">
    <ul>
        <li>
            <div class="first">
                <div class="second"></div>
            </div>
        </li>
        <li>
            <div class="first">
                <div class="active"></div>
            </div>
        </li>
        <li>
            <div class="first">
                <div class="second"></div>
            </div>
        </li>
    </ul>
    <a href="#" id="next">Next</a>
</div>

$(function(){
    $('#next').click(function (){
        $('ul').find('li').each(function (){
            if($(this).find('div').hasClass('active')){
                $(this).removeClass('active');
                $(this).addClass('second');  
                $(this).next().closest('div').next().attr('class','active');
            }
        })
    })
})

Upvotes: 1

Views: 95

Answers (3)

Josh Mein
Josh Mein

Reputation: 28635

This should work for you:

$('#next').click(function (){
    $active = $('.active');

    $active.toggleClass('active second');
    $active.closest('li').next().find('.second').toggleClass('second active');
});

Live DEMO

If you want to start over at the first li after reaching the bottom, this should work for you:

var $firstSecond = $('.second').eq(0);

$('#next').click(function (){
    var $active = $('.active');
    var $nextSecond = $active.closest('li').next().find('.second');

    $active.toggleClass('active second');

    if($nextSecond.size() != 0)
        $nextSecond.toggleClass('second active');
    else
        $firstSecond.toggleClass('second active');
});

Live DEMO

Upvotes: 2

Jared Farrish
Jared Farrish

Reputation: 49188

I made a slight change to your markup:

<div id="wrap">

That's an id. This allows me to cache it's reference in a closure as pointing to a specific element. If you are actually using that in a series and not as an id, the following would be different. But I thought I would show you how this would work with caching and traversing.

$(function(){
    var $ul = $('#wrap ul');

    $('#next').click(function (){
        var $active = $ul.find('.active'),
            $new = $active.parents('li').next();

        $active.toggleClass('active second');

        if ($new.size() < 1) {
            $new = $active.parents('li').siblings().first();
        }

        $new.find('.second').toggleClass('second active');
    });
});

http://jsfiddle.net/userdude/y29uJ/

So if you were to run a series of these...

$(function(){
    $('.next').click(function (){
        var $active = $(this).parent().find('.active'),
            $new = $active.parents('li').next();

        $active.toggleClass('active second');

        if ($new.size() < 1) {
            $new = $active.parents('li').siblings().first();
        }

        $new.find('.second').toggleClass('second active');
    });
});

http://jsfiddle.net/userdude/y29uJ/5

Upvotes: 1

astro boy
astro boy

Reputation: 1430

toggleClass is what you are looking for in jQuery documentation/examples

Upvotes: 0

Related Questions