Question

$('.HelpBoxOk').live('click',function()
{
    var BoxHelpMain = $(this).parent().parent().parent().parent().parent().parent();

    var ShouldFadeIn = false; //if the button says next then there is more divs to fadein if it says ok then no more divs to fade in i.e end of divs
    if($(this).attr('value') == 'Next')
    {
        ShouldFadeIn = true;
    }

    BoxHelpMain.fadeOut().queue(function() //fadeout the current div
    {
        if(ShouldFadeIn == true) // if it should fade in next div
        {
            FadeinNextDiv   = false;
            AllBoxHelpMain  = $(document).find("[id^=BoxHelpMain]"); // find all div with the same id as current one 

            if(AllBoxHelpMain.length) // if any divs with id exists 
            {
                AllBoxHelpMain.each(function()  // loop through all the divs 
                {
                    if(FadeinNextDiv == true)  // if we need to fade in the next div 
                    {
                        $(this).fadeIn();
                    $(this).find("input[class^=HelpBoxOk]:first").focus();      // fade in the div          
                        FadeinNextDiv   = false;
                        return false;
                    }
                    if($(this).attr('id') == BoxHelpMain.attr('id') )   // if current div id matches the clicked box/div then the next box/div needs to be fadded in 
                    {                       
                        FadeinNextDiv = true;
                    }
                })          
            }
        }
    });
    return false;
});

Please help me rectify this crappy code. My requirement is there are many div whose id starts with BoxHelpMain having a button HelpBoxOk. Now on click of the helpBoxOk i want it to search for next BoxHelpMain in the entire doc and fadeout the current BoxHelpMain and fadein the next BoxHelpMain. If no other div is present then just fadeout the current one

None of theses divs are siblings and scattered across dom

Answer 1

Firstly, give all of your BoxHelpMain* divs the same class:

<div id="BoxHelpMain1" class="boxhelp">

Assuming that all such elements are at the same level in your DOM hierarchy (i.e. they’re all siblings) finding the next one then reduces to:

var current = $(this).closest('.boxhelp');         // find button's parent
var next = $(current).nextAll('.boxhelp').first(); // find next .boxhelp

And your fading just becomes:

$(current).fadeOut(function() {
    $(next).fadeIn();  // called when the .fadeOut() completes
});

There’s no need to check whether next exists or not – jQuery will just ignore the empty list.

If they’re not siblings, try this:

var $current = $(this).closest('.boxhelp');  // find button's parent
var $next = $();                             // an empty jQuery object

var $all = $('.boxhelp');
for (var i = 0; i < $all.length - 1; ++i) {
    if ($all.get(i).is($current)) {
        $next = $all.get(i + 1);
        break;
    }
}

and then fadeout as above.