如何从$ .each内部突破jQuery click事件函数

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

 });

Answer 1

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; } //... }); 

Answer 2

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
       }

    });

 });

Answer 3

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

});

Answer 4

jQuery doc：“我们可以通过使回调函数返回false来在特定的迭代中破坏$ .each（）循环。返回非false与for循环中的continue语句相同；它将立即跳至下一个迭代”。