Nested jQuery.each() - continue/break

Question

Consider the following code:

    var sentences = [
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        'Vivamus aliquet nisl quis velit ornare tempor.',
        'Cras sit amet neque ante, eu ultrices est.',
        'Integer id lectus id nunc venenatis gravida nec eget dolor.',
        'Suspendisse imperdiet turpis ut justo ultricies a aliquet tortor ultrices.'
    ];

    var words = ['ipsum', 'amet', 'elit'];

    $(sentences).each(function() {
        var s = this;
        alert(s);
        $(words).each(function(i) {
            if (s.indexOf(this) > -1)
            {
                alert('found ' + this);
                return false;
            }
        });
    });

The interesting part is the nested jQuery.each() loops. As per the documentation, returning false will break out of the loop (discontinuing execution of the loop - similar to a normal JavaScript break statement), and returning non-false will stop the current iteration and continue with the next iteration (similar to a normal JavaScript continue statement).

I can break or continue a jQuery.each() on its own, but with nested jQuery.each, I've found it difficult to break out of the parent loop from within the child loop. I could use a boolean value, and update it on every child iteration, but I was wondering if there was an easier way.

I've set up an example at jsFiddle if you'd like to mess around with it. Simply click the "Test" button to run the example shown above.

TLDR: Is there anything resembling a labeled continue or break within the context of jQuery?

It looks like you're over-using jQuery here, a simple `for` loop will do what you want :) — Nick Craver, Jul 16 '10 at 17:47
This is a much simplified example. In reality, I'm looping over jQuery-selected DOM nodes, etc. — Ryan Kinal, Jul 16 '10 at 18:28

score 93 · Answer 1 · answered Oct 11 '12 at 09:17

93

There are a lot of answers here. And it's old, but this is for anyone coming here via google. In jQuery each function

return false; is like break.

just

return; is like continue

These will emulate the behavior of break and continue.

answered Oct 11 '12 at 09:17

Thihara

7,031
2
29
56

1

Please see Serj's answer. It's downvoted because you *can't* have a *labeled* `return true` or `return false` – Ryan Kinal Oct 12 '12 at 13:52
1

actually I tried return true in firefox and it was the same as break for me. Which is the reason for my answer. – Thihara Oct 15 '12 at 02:30
10

That doesn't break out of a *nested* loop. – Mr Mikkél Apr 01 '14 at 16:56

score 23 · Accepted Answer · answered Jul 16 '10 at 17:50

23

You should do this without jQuery, it may not be as "pretty" but there's less going on and it's easier to do exactly what you want, like this:

var sentences = [
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'Vivamus aliquet nisl quis velit ornare tempor.',
    'Cras sit amet neque ante, eu ultrices est.',
    'Integer id lectus id nunc venenatis gravida nec eget dolor.',
    'Suspendisse imperdiet turpis ut justo ultricies a aliquet tortor ultrices.'
];

var words = ['ipsum', 'amet', 'elit'];

for(var s=0; s<sentences.length; s++) {
    alert(sentences[s]);
    for(var w=0; w<words.length; w++) {
        if(sentences[s].indexOf(words[w]) > -1) {
            alert('found ' + words[w]);
            return;
        }
    }
}

You can try it out here. I'm not sure if this is the exact behavior you're after, but now you're not in a closure inside a closure created by the double .each() and you can return or break whenever you want in this case.

answered Jul 16 '10 at 17:50

Nick Craver

623,446
136
1,297
1,155

Very good point. Even with the more complicated use of jQuery DOM selectors that makes up my actual use-case, they can be iterated over normally. – Ryan Kinal Jul 16 '10 at 18:31
Normal JavaScript gets the check. Man, I love this language. – Ryan Kinal Jul 16 '10 at 20:03
1

this solution is impeccably correct, but it does not address the stated question. It does not explain how to break out of a chain of nested 'each' loops. thus -1 (sorry) – Legna Oct 28 '15 at 18:02
@Legna Yes it does... Nick says you can return (break from both loops) or break (break from inner loop) using this solution. – mhodges Apr 08 '16 at 21:58

Serj Sagan · Answer 3 · 2018-10-14T11:13:47.733

14

As is stated in the jQuery documentation http://api.jquery.com/jQuery.each/

return true in jQuery.each is the same as a continue

return false is the same as a break

edited Oct 14 '18 at 11:13

answered Aug 16 '12 at 15:31

Serj Sagan

28,927
17
154
183

1

$(selector).each() VS $.each(set) - I hope it works the same :) – jave.web Nov 15 '13 at 12:51

score 8 · Answer 4 · answered Apr 02 '14 at 03:59

I've used a "breakout" pattern for this:

$(sentences).each(function() {
    var breakout;
    var s = this;
    alert(s);
    $(words).each(function(i) {
        if (s.indexOf(this) > -1)
        {
            alert('found ' + this);
            return breakout = false;
        }
    });
    return breakout;
});

This works nicely to any nesting depth. breakout is a simple flag. It will stay undefined unless and until you set it to false (as I do in my return statement as illustrated above). All you have to do is:

declare it in your outermost closure: var breakout;
add it to your return false statement(s): return breakout = false
return breakout in your outer closure(s).

Not too inelegant, right? ...works for me anyway.

this is really nice, it is a shame that all the other answers - which aside from the selected answer are just wrong have been upvoted. — bharal, Oct 13 '18 at 17:23

score 8 · Answer 5 · answered Jul 16 '10 at 17:55

8

There is no clean way to do this and like @Nick mentioned above it might just be easier to use the old school way of loops as then you can control this. But if you want to stick with what you got there is one way you could handle this. I'm sure I will get some heat for this one. But...

One way you could do what you want without an if statement is to raise an error and wrap your loop with a try/catch block:

try{
$(sentences).each(function() {
    var s = this;
    alert(s);
    $(words).each(function(i) {
        if (s.indexOf(this) > -1)
        {
            alert('found ' + this);
            throw "Exit Error";
        }
    });
});
}
catch (e)
{
    alert(e)
}

Ok, let the thrashing begin.

answered Jul 16 '10 at 17:55

spinon

10,760
5
41
59

7

Wow. This may be a blatant misuse of try/catch, but it works. – Ryan Kinal Jul 16 '10 at 18:30
@Ryan yeah I know. It completely goes against what/how we are taught to do things. But I was just trying to propose a solution. – spinon Jul 16 '10 at 18:37
1

Glad to help then. Surprised not really any thrashing. Must be light today or my self acknowledgment of the not best practice approach. – spinon Jul 16 '10 at 19:05
Almost gave you the check on this one, but it felt too dirty :-D Seriously, though, clever solution. – Ryan Kinal Jul 16 '10 at 20:02
1

I like it too! This is exactly why we call it "throwing an exception" now instead of "raising an error". One need only change "Exit Error" to a more diplomatic "Exit condition encountered" or some such, and we have laundered the concept and made it politically correct. :) One might say (if one is given to spin doctoring) that the rule here is that one loops "except" when an exit condition is encountered, at which point one throws an exception. – BobRodes Oct 04 '12 at 15:34

Anurag · Answer 6 · 2010-07-16T18:33:51.220

The problem here is that while you can return false from within the .each callback, the .each function itself returns the jQuery object. So you have to return a false at both levels to stop the iteration of the loop. Also since there is not way to know if the inner .each found a match or not, we will have to use a shared variable using a closure that gets updated.

Each inner iteration of words refers to the same notFound variable, so we just need to update it when a match is found, and then return it. The outer closure already has a reference to it, so it can break out when needed.

$(sentences).each(function() {
    var s = this;
    var notFound = true;

    $(words).each(function() {
        return (notFound = (s.indexOf(this) == -1));
    });

    return notFound;
});

You can try your example here.

score 3 · Answer 7 · answered Jul 16 '10 at 17:50

Unfortunately no. The problem here is that the iteration happens inside functions, so they aren't like normal loops. The only way you can "break" out of a function is by returning or by throwing an exception. So yes, using a boolean flag seems to be the only reasonable way to "break" out of the outer "loop".

score 3 · Answer 8 · answered Mar 18 '11 at 00:23

3

return true not work

return false working

found = false;
query = "foo";

$('.items').each(function()
{
  if($(this).text() == query)
  {
    found = true;
    return false;
  }
});

answered Mar 18 '11 at 00:23

misima

421
5
17

score 2 · Answer 9 · answered May 15 '12 at 14:29

2

Labeled Break

outerloop:
$(sentences).each(function() 
{
    $(words).each(function(i) 
    {
        break; /* breaks inner loop */
    } 
    $(words).each(function(i)  
    {
        break outerloop; /* breaks outer loop */
    }
}

answered May 15 '12 at 14:29

capdragon

14,565
24
107
153

Does it really work? Labeled breaks over function boundaries? – nalply Mar 25 '13 at 13:17

score 2 · Answer 10 · answered Jun 15 '13 at 12:53

Confirm in API documentation http://api.jquery.com/jQuery.each/ say:

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.

and this is my example http://jsfiddle.net/r6jqP/

(function($){
    $('#go').on('click',function(){
        var i=0,
            all=0;
        $('li').each(function(){
             all++;
             if($('#mytext').val()=='continue')return true;
             i++;
             if($('#mytext').val()==$(this).html()){
                 return false;
             }
        });
        alert('Iterazione : '+i+' to '+all);
    });
}(jQuery));

score 0 · Answer 11 · edited Mar 11 '20 at 21:31

0

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

edited Mar 11 '20 at 21:31

Dan

1,238
2
17
32

answered Mar 11 '20 at 15:26

Mahdi Fallah

9
1

Nested jQuery.each() - continue/break

11 Answers11

Labeled Break

Linked

Related