CODEWITHSUNDEEP
javascriptjquery
John Doe
John Doe

Reputation: 3233

How to quit an each() loop and return early from the outer function?

I am trying to return early from an event handler function if a certain condition is met (If the id selected is already in my question list.)

However I am not seeing the results that I expect.

When the condition is met I get the "I should return" message, but I am also getting the "did I still go here?" message. This is still allowing the rest of the code to execute in this function. 

my.test.on('click', '.question-tagging .add-question-type', function() {
            var questionIds = getSelectedQuestionIds();

            console.log("questionIDs = " + questionIds);
            var currentQuestions = $.each($('.question-list .question-item'), function () {                    
                console.log("Question ID = " + $(this).find('.remove-tag').data('questionid'));
                if (questionIds == $(this).find('.remove-tag').data('questionid'))
                {
                    console.log("I should return");
                    return;
                }                    
            });

            console.log("did i still go here?");

            // more code...
});

Upvotes: 1

Views: 137

Answers (3)

plalx
plalx

Reputation: 43718

You have to use return false to break out of $.each loop. However, that will only break out of the loop callback and the control will be returned to the click handler function.

If you whish to return early from that function as well you will need another return statement in the click handler.

Upvotes: 0

Brian Glaz
Brian Glaz

Reputation: 15676

return will only stop execution of the function it's in. In your case, it will stop execution of the loop, but not the outer click handling function. You can use a boolean flag to determine if you should continue with the outer function, like this:

my.test.on('click', '.question-tagging .add-question-type', function() {
            var questionIds = getSelectedQuestionIds();

            console.log("questionIDs = " + questionIds);

            var shouldContinue = true; //set up a flag

            var currentQuestions = $.each($('.question-list .question-item'), function () {                    
                console.log("Question ID = " + $(this).find('.remove-tag').data('questionid'));
                if (questionIds == $(this).find('.remove-tag').data('questionid'))
                {
                    console.log("I should return");
                    shouldContinue = false; //flip the flag to false
                    return;
                }                    
            });


            if( shouldContinue ) //only continue if condition wasn't met
            {
                console.log("did i still go here?");

                // more code...
             }
});

Upvotes: 0

Paul Roub
Paul Roub

Reputation: 36438

Returning from each(), as you saw, isn't returning from the click handler. You can get what you want if you abandon each() for a simple for loop:

my.test.on('click', '.question-tagging .add-question-type', function() {
    var questionIds = getSelectedQuestionIds();

    console.log("questionIDs = " + questionIds);
    var currentQuestions = $('.question-list .question-item');

    for ( var i = 0; i < currentQuestions.length; ++i )
    {
        var q = $(currentQuestions[i]);

        console.log("Question ID = " + q.find('.remove-tag').data('questionid'));
        if (questionIds == q.find('.remove-tag').data('questionid'))
        {
            console.log("I should return");
            return;
        }                    
    }

    console.log("did i still go here?");

    // more code...
});

Upvotes: 1

Related Questions