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

Question

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

 });

Judging by the body of your callback function, seems like `array.find(x => x == 'yourvalue')` would be a better alternative. — haim770, Apr 21 '18 at 17:38
[for-loops are up to 8x faster than $.each](https://stackoverflow.com/questions/11887450/each-vs-for-loop-and-performance) — Luca Kiebel, Apr 21 '18 at 17:38
@dfsq: Yes you can. You're thinking of the native `forEach`. — T.J. Crowder, Apr 21 '18 at 17:39
https://stackoverflow.com/questions/1784780/how-to-break-out-of-jquery-each-loop — deEr., Apr 21 '18 at 17:39
Possible duplicate of [How to break out of jQuery each Loop](https://stackoverflow.com/questions/1784780/how-to-break-out-of-jquery-each-loop) — ElasticCode, Apr 21 '18 at 17:40
@T.J.Crowder Haha, this is funny. Indeed you need to return false. — dfsq, Apr 21 '18 at 17:41
After your edit your `this` is — not — what you think it is. You want to put it in a variable. Before your `each` `function`. — deEr., Apr 21 '18 at 17:42
@AjAX.: What makes you think it isn't what the OP expects? They're looking for sibling inputs, then using `val`. — T.J. Crowder, Apr 21 '18 at 17:44
@AjAX.: Correct, it is not. `$(this).siblings('input').each(...)` will call its callback once for each sibling input, with `this` referring to the input. http://api.jquery.com/each/ (An early version of the question used [the other `each`](http://api.jquery.com/jQuery.each/) but didn't use `this` in the callback, and `this` would have referred to each element.) — T.J. Crowder, Apr 22 '18 at 08:20

score 2 · Accepted Answer · answered Apr 22 '18 at 08:26

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:

Use a simple for loop [as in your answer]

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;
    }

    //...
});

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;
    }

    //...
});

score 0 · Answer 2 · answered Apr 21 '18 at 17:39

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
       }

    });

 });

score 0 · Answer 3 · answered Apr 21 '18 at 17:52

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

});

score -1 · Answer 4 · answered Apr 21 '18 at 17:39

-1

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."

answered Apr 21 '18 at 17:39

Ludovit Mydla

802
9
17

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

4 Answers4