CODEWITHSUNDEEP
javascriptjquery
Graeme Leighfield
Graeme Leighfield

Reputation: 2985

jquery next() not working?

Ive made a fiddle of my problem here.

http://jsfiddle.net/E9cUS/1/

JavaScript:

$('.top').click(function () {
    var thisPage = $(this).closest('.yesNoItem');
    $('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
        thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
            $(this).css("display", "none");
        });
    });
});

$('.yesNoNext').click(function () {
    $(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
        //This isnt working? Please advise?
        $(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
    });
});

HTML:

<div id="stage">
    <div class="yesNoOuter">

        <div class="yesNoItem" style="opacity:1;">
            <div class="yesNoContainer yes">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                </div>

            </div>
            <div class="yesNoContainer no">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                    <p>Text 1</p>
                    <div class="yesNoNext">More</span>
                </div>
            </div>
        </div>

        <div class="yesNoItem">
            <div class="yesNoContainer yes">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                </div>
            </div>
            <div class="yesNoContainer no">
                <div class="top">
                    <div class="yesNoTick"></div>
                </div>
                <div class="bottom">
                    <p>Text 2</p>
                    <div class="yesNoNext">More</span>
                </div>
            </div>
        </div>
    </div>
</div>

​

I've also put the line of code thats not working.

Bascially it is hiding the element that I want, but not fading the next one in...

Can any one advise based upon my code? Many thanks!

Upvotes: 1

Views: 201

Answers (2)

Felix Kling
Felix Kling

Reputation: 816242

I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).

Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).

If you correct your HTML it should work (at least it should select the right element).

If they are actually supposed to be nested, then .next() is the wrong method anyways.

Upvotes: 2

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

You had an error in your markup

<div class="yesNoNext">More</span>

if you correct that, next() works http://jsfiddle.net/E9cUS/2/

Upvotes: 3

Related Questions