CODEWITHSUNDEEP
javascriptjquery
Sami Al-Subhi
Sami Al-Subhi

Reputation: 4672

How to break out from jQuery click event function from inside $.each

How can I exist from the whole jquery click event function if the condition is met inside $.each. One solution would be storing condition result in a variable and then have an if statement after the loop but is not there a direct way?

$(".main").on("click",".button",function(e){

    $(this).siblings('input').each(function(){

       if($(this).val() == 'yourvalue') {
         return false;
       }

    });


    //......rest of the code runs if the above condition is NOT met

 });

Upvotes: 1

Views: 6443

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

How to break out from jQuery click event function from inside $.each

So you want to return false from the click handler based on the result of the inner loop. You have several options:

  1. Use a simple for loop [as in your answer]

  2. Use get to get an array for the inputs, and use Array#some:

    $(".main").on("click", ".button", function(e) {
    if ($(this).siblings('input').get().some(function(input) { return input.value == 'yourvalue'; })) {
        return false;
    }

    //...
});

    which is more concise with an ES2015+ arrow function:

    $(".main").on("click", ".button", function(e) {
    if ($(this).siblings('input').get().some(input => input.value == 'yourvalue')) {
        return false;
    }

    //...
});

  3. Use a flag outside the loop:

    $(".main").on("click", ".button", function(e) {
    var flag = false;
    $(this).siblings('input').each(function() {
        if ($(this).val() == 'yourvalue') { // can use this.value instead of $(this).val() here
            flag = true;
            return false; // Breaks the `each` loop
        }
    });
    if (flag) {
        return false;
    }

    //...
});

Upvotes: 2

Sami Al-Subhi
Sami Al-Subhi

Reputation: 4672

Converting to native loop will enable me to exist the click function when using return false

$(".main").on("click",".button",function(e){

   var inputs = $(this).siblings('input')

   for(var x = 0; x < inputs.length; x++){

     if(inputs.eq(x).val() == 'yourvalue') {
       return false;
     }

   }


//......rest of the code runs if the above condition is NOT met

});

Upvotes: 0

Jake Miller
Jake Miller

Reputation: 2642

What you have should work. To break a $.each loop, you simply need to return false.

Returning true skips to the next iteration, equivalent to a continue in a normal loop.

$(".main").on("click",".button",function(e){

    $.each(array, function(i){

       if(i === 'yourvalue') {
         return false; // will exit the $.each loop
       }

    });

 });

Upvotes: 0

Ludovit Mydla
Ludovit Mydla

Reputation: 822

jQuery doc: "We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration."

Upvotes: -1

Related Questions